[英]How to validate form for AJAX request using gem 'jquery-validation-rails'
I have gem 'jquery-validation-rails' in Gemfile. 我在Gemfile中有gem'jquery -validation-rails' 。
Included it in application.js file //= require jquery.validate
包含在application.js文件中
//= require jquery.validate
Then I have function/scripts that adds validation to certain fields, as: 然后,我有将验证添加到某些字段的函数/脚本,例如:
// Field names from FORM
function validateCampaignForm(){
var $form = $('form.user_form');
$form.validate({
rules: {
"user[title]": {required: true, maxlength: 80},
"user[content]": {required: true, maxlength: 80},
}
});
}
// Load
validateCampaignForm();
// Save button on click
$('a.save-form').on('click', function(){
// should validates field
});
Generated HTML Form: 生成的HTML表单:
<form class="user_form" action="/users/1110212666" accept-charset="UTF-8" method="post" novalidate="novalidate">
<div class="row">
<label>Title</label>
<input class="required" type="text" value="We saved your cart" name="user[title]" id="user_title">
</div>
...other fields....
<a class="button primary save-form" href="#">Save Settings</a>
</form>
And checking the form submission. 并检查表单提交。
$('form.campaign_form').on('submit', function(){
$('form.campaign_form').valid();
console.log($('form.campaign_form').valid()); // returns TRUE not false even fields with validations are empty
return false; // just to prevent normal form submission
});
To eliminate the need to have a submit button within the form, use .valid()
to trigger a validation 为了消除在表单中具有提交按钮的需要,请使用
.valid()
触发验证
<form class="campaign_form" action="/users/1110212666" accept-charset="UTF-8" method="post" novalidate="novalidate">
<div class="row">
<label>Title</label>
<input class="required" type="text" value="We saved your cart" name="user[title]" id="user_title">
</div>
...other fields....
# IMPORTANT NOTE: <a> or other elements aside from button type="submit" can only trigger the validation.
// <a class="button primary save-form" href="javascript:;">Save Settings</a>
<button type="submit" class="save-form">Save Settings</button>
</form>
Validation using jquery-validate 使用jquery-validate进行验证
// initializes validation
$('.user_form').validate({
rules: {
"user[title]": {required: true, maxlength: 80},
"user[content]": {required: true, maxlength: 80}
}
});
// on click validation of user form
$('.save-form').on('click', function(e){
e.preventDefault(); // to prevent form from normal submission
$('.user_form').valid();
});
// other way (catch on form submission)
$('form.campaign_form').on('submit', function(e){
e.preventDefault();
$('.user_form').valid();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.