问题描述:

I'm creating a "Sign Up" form for my new website, but got a problem with a jQuery/JS function that is supposed to check for some conditions to be reached.

$(function checkform() {

if (this.is("#username")) {

var validchars = /^[a-zA-Z0-9\s]+$/;

var nameHasError;

if (this.val().length < 6 && this.val().length > 26) {

nameHasError = true;

this.parent("div").addClass("has-error");

} else if (!(validchars.test(this).val())) {

nameHasError = true;

this.parent("div").addClass("has-error");

} else {

nameHasError = false;

this.parent("div").removeClass("has-error");

};

} else if (this.is("#password")) {

var passHasError;

if (this.val().length < 5 && this.val().length > 45) {

passHasError = true;

this.parent("div").addClass("has-error");

} else {

passHasError = false;

this.parent("div").removeClass("has-error");

};

};

});

Here's the JSFiddle with HTML part (I'm using bootstrap on my website but preferred to set a specific class on the fiddle)

Best regards

网友答案:

There are multiple issues in the code

  • You have defined the checkForm in $(), so the function will be available only inside the dom ready handler, so your onkeypress will throw an error
  • When dom ready handler invokes the function this will be the document object which does not have the is function
  • The character size validation should use || not &&

So, ti will be better to use a jQuery event handler with both the fields having their own validation function like

jQuery(function($) {
  $('#username').on('keypress', function() {
    var validchars = /^[a-zA-Z0-9\s]+$/;
    var nameHasError = false;
    var $this = $(this),
      value = this.value;
    if (value.length < 6 || value.length > 26) {
      nameHasError = true;
    } else if (!validchars.test(value)) {
      nameHasError = true;
    };
    $this.parent("div").toggleClass("has-error", nameHasError);
  });
  $('#password').on('keypress', function() {
    var passHasError = false;
    var $this = $(this),
      value = this.value;
    if (value.length < 5 || value.length > 45) {
      passHasError = true;
    };
    $this.parent("div").toggleClass("has-error", passHasError);
  });
});
.has-error {
  background-color: red;
}
.has-success {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters">
    <span id="unameError"></span>
  </div>
  <br/>
  <div class="">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
    <span id="passError"></span>
  </div>
</div>
网友答案:

You are mixing vanilla javascript with jquery syntax. this.is('#username') is not javascript.

Use this.id == "username" (vanilla js) instead

OR

$(this).is('#username') (jquery)

Take care with the scope in your functions

网友答案:

function checkform() {
  if ($(this).is("#username")) {
    var validchars = /^[a-zA-Z0-9\s]+$/;
    var nameHasError;
    if ($(this).val().length < 6 || $(this).val().length > 26) {
      nameHasError = true;
      $(this).parent("div").addClass("has-error");
    } else if (!(validchars.test($(this).val()))) {
      nameHasError = true;
      $(this).parent("div").addClass("has-error");
    } else {
      nameHasError = false;
      $(this).parent("div").removeClass("has-error");
    };
  } else if ($(this).is("#password")) {
    var passHasError;
    if ($(this).val().length < 5 || $(this).val().length > 45) {
      passHasError = true;
      $(this).parent("div").addClass("has-error");
    } else {
      passHasError = false;
      $(this).parent("div").removeClass("has-error");
    };
  };
}

$(function () {$('input').on('keyup', checkform);
})
.has-error {
  background-color: red;
}

.has-success {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters">
    <span id="unameError"></span>
  </div>
  <br/>
  <div class="">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password"  placeholder="Password">
    <span id="passError"></span>
  </div>
</div>
相关阅读:
Top