即使输入只包含空格，JQuery验证也会接受

时间：2017-02-14 15:01:56

标签： javascript jquery html validation

我无法验证输入字段是否只包含空格。我已经为必填字段指定了必需的规则，但是如果我只输入空格它仍然有效。此外，用户名字段的noSpace规则似乎不起作用。它禁用其他字段的验证。这是我的标记。

<form method=post class="form-auth-small" action="../php/controller/registration_controller.php">
  <div class="form-group row m-t-10px">
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>RANK: </h5></label>
      <select class="form-control" name="rank" required="required">
        <option value="rank1">NUP</option>
        <option value="rank2">PO1</option>
        <option value="rank3">PO2</option>
        <option value="rank4">PO3</option>
        <option value="rank5">SPO1</option>
        <option value="rank6">SPO2</option>
        <option value="rank7">SPO3</option>
        <option value="rank8">SPO4</option>
        <option value="rank9">PINSP</option>
        <option value="rank10">PSINSP</option>
        <option value="rank11">PCINSP</option>
        <option value="rank12">PSUPT</option>
        <option value="rank13">PSSUPT</option>
        <option value="rank14">PCSUPT</option>
        <option value="rank15">PDIR</option>
        <option value="rank16">PDDG</option>
        <option value="rank17">PDG</option>
      </select>
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>USERNAME: </h5></label>
      <input class="form-control" name="username" placeholder="Username must only contain characters [A-Z] and numbers [0-9]" type="text" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>FIRST NAME: </h5></label>
      <input class="form-control" name="fname" type="text" minlength="1" required="required">
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>PASSWORD: </h5></label>
      <input class="form-control" name="pwd" placeholder="Choose a strong password" type="password" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>MIDDLE NAME: </h5></label>
      <input class="form-control" name="mname" type="text" minlength="1" required="required">
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>EMAIL: </h5></label>
      <input class="form-control" name="email" type="email" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>LAST NAME: </h5></label>
      <input class="form-control" name="lname" type="text" minlength="1" required="required">
    </div>
  </div>
  <div class="form-group clearfix m-b-5px">
    <button type="submit" name="btnRegister" class="btn btn-primary btn-lg btn-block">REGISTER</button>
  </div>
  <div class="bottom m-b-15px">
    <span><i class="fa fa-lock"></i> <a href="login.php">Already have an account? Sign in.</a></span>
  </div>
</form>

JS（没有noSpace规则）

$(document).ready(function () {
$('.form-auth-small').validate({
  rules: { 
    rank: {
      required: true
    },
    username: {
      required: true,
      minlength: 3
    },
    fname: {
      required: true
    },
    mname: {
      required: true
    },
    lname: {
      required: true
    },
    pwd: {
      required: true
    },
    email: {
      required: true
    }
  },
  errorElement: "em",
  errorPlacement: function ( error, element ) {
    // Add the `help-block` class to the error element
    error.addClass( "help-block" );

    // Add `has-feedback` class to the parent div.form-group
    // in order to add icons to inputs
    element.parents( ".col-sm-5" ).addClass( "has-feedback" );

    error.insertAfter( element );

    // Add the span element, if doesn't exists, and apply the icon classes to it.
    if ( !element.next( "span" )[ 0 ] ) {
      $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
    }
  },
  success: function ( label, element ) {
    // Add the span element, if doesn't exists, and apply the icon classes to it.
    if ( !$( element ).next( "span" )[ 0 ] ) {
      $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
    }
  },
  highlight: function ( element, errorClass, validClass ) {
    $( element ).parents( ".col-sm-6" ).addClass( "has-error" ).removeClass( "has-success" );
    $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
  },
  unhighlight: function ( element, errorClass, validClass ) {
    $( element ).parents( ".col-sm-6" ).addClass( "has-success" ).removeClass( "has-error" );
    $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
  }
});
});

DEMO 提前谢谢！

3 个答案:

答案 0 :(得分：3)

只需在jQuery验证函数run ::

之前添加此方法 
jQuery.validator.addMethod("noSpace", function(value, element) { 
    return value.indexOf(" ") < 0 && value != ""; 
  }, "No space please and don't leave it empty");

AND 使用

noSpace: true

为您想要的每个字段。

答案 1 :(得分：3)

试试这个

$(document).ready(function() {
  jQuery.validator.addMethod("noSpace", function(value, element) { 
     return value.indexOf(" ") < 0 && value != ""; 
}, "No space");


$(".form-auth-small").validate({
   rules: {
      username : {
          noSpace: true
      }
   }
  });


})

答案 2 :(得分：1)

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>
</head>
<body>

<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>
相关问题
最新问题