我在驗證輸入字段是否僅包含空格時遇到問題。我已經爲必填字段指定了必需的規則,但如果只輸入空格,它仍然有效。另外,用戶名字段的noSpace規則似乎不起作用。它禁用其他字段的驗證。這是我的標記。即使輸入僅包含空格,JQuery驗證也會接受
<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 預先感謝您!
你試過'無空間:TRUE'? –
@Tumen_t是的,我有。除非我的實現是錯誤的。當我在minlength:3字段(以逗號分隔)之下添加它時,它將禁用其他字段的驗證。 –
那麼[修剪](https://api.jquery.com/jQuery.trim/)該字段中的值是什麼..如果它仍然是空白..然後會發生什麼? –