如何在提交时使用jquery验证来验证表单

Question

我正试图使用jQuery validation js验证我的表单，但问题是我在toast中没有收到任何错误消息。

我按照这个链接来实现toast中的错误。我得到的错误是文本框下面的"此字段是必需的"。以下是我的相同代码：

HTML

<form class="card-body">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" name="firstName">
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" name="lastName">
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" name="city">
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" name="state">
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" name="zip">
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="col-md-3 mb-3">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" name="password">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="invalidCheck2" name="confirm">
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-success" type="submit" id="submitBtn">Submit</button>
<button class="btn btn-danger" type="reset">Reset</button>
</form>

JS

function toasterOptions() {
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": true,
"onclick": null,
"showDuration": "100",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "show",
"hideMethod": "hide"
};
};

$(document).ready(function () {
toasterOptions();
$('form').submit(function(e) { 
e.preventDefault();
$(this).validate({
rules: {
firstName: 'required',
lastName: 'required'
},
messages: {
firstName: () => {
toastr.error('First Name required')
},
lastName: () => {
toastr.error('Last Name required')
}
}
});
var values = $(this).serializeArray();
var xyz = {};
$.each(values, function (i, obj) { 
xyz[obj.name] = obj.value
});
window.localStorage.setItem('data', JSON.stringify(xyz));
toastr['info']('Done');
});
});

我遗漏了什么吗？

Answer 1

第一个问题是，您应该在提交函数之外声明您的验证(只声明一次验证(

其次，您必须对每个条件使用消息验证作为返回烤面包机消息的函数，如：

"firstName": {
required: function() {
toastr.error('First Name required')
},
},

此外，建议为您的表单使用ID，并通过单击按钮设置提交，并使用jquery validate valid((函数检查表单是否有效

参见以下工作片段：

function toasterOptions() {
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": true,
"onclick": null,
"showDuration": "100",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "show",
"hideMethod": "hide"
};
};

$(document).ready(function () {
toasterOptions();
var form = $("#my-form");
form.validate({
onfocusout: false,
rules: {
"firstName": {
required: true,
},
"lastName": {
required: true,
}
},
messages: {
"firstName": {
required: function() {
toastr.error('First Name required')
},
},
"lastName": {
required: function() {
toastr.error('Last Name required')
},
},
},

submitHandler: function(form {
var values = $(form).serializeArray();
console.log(values);
var xyz = {};
$.each(values, function (i, obj) { 
xyz[obj.name] = obj.value
});
//window.localStorage.setItem('data', JSON.stringify(xyz));
toastr['info']('Done');
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js" integrity="sha512-UdIMMlVx0HEynClOIFSyOrPggomfhBKJE28LKl8yR3ghkgugPnG6iLfRfHwushZl1MOPSY6TsuBDGPK2X4zYKg==" crossorigin="anonymous"></script>
<form id="my-form" class="card-body">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" name="firstName">
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" name="lastName">
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" name="city">
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" name="state">
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" name="zip">
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="col-md-3 mb-3">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" name="password">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="invalidCheck2" name="confirm">
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-success"  id="submitBtn" type="submit">Submit</button>
<button class="btn btn-danger" type="reset">Reset</button>
</form>

Answer 2

Dude只是将Required属性放在应该为您做这件事的输入元素中，在填写了所需的属性之前，from不会提交。

<input type="text" required class="form-control" id="validationDefault02" name="lastName">