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

Question

我在验证输入字段是否仅包含空格时遇到问题。我已经为必填字段指定了必需的规则，但如果只输入空格，它仍然有效。另外，用户名字段的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（无规则无空间）

$(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 预先感谢您！

Answer 1

您的jQuery之前只需添加这个方法验证功能运行::

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

和使用

noSpace: true 

你想要的每个字段。

Answer 2

试试这个

$(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 
     } 
    } 
    }); 


})