向现有 jQuery 表单处理脚本添加规则
Adding rules to existing jQuery form processing script
我正在处理具有以下现有脚本的客户站点:
/** Event Registration **/
var isSubmitingForm = false;
$(document).ready(function() {
$("#eventRegForm").validate({
invalidHandler: function(form, validator) {
$("#eventRegForm span.input-text-error").removeClass("input-text-error");
$("#eventRegForm div.textarea-error").removeClass("textarea-error");
},
submitHandler: function(form, validator) {
$("#eventRegForm span.input-text-error").removeClass("input-text-error");
$("#eventRegForm div.textarea-error").removeClass("textarea-error");
var formData = "ServerProcess=true&FriendlyName=Event Registration&" + $("#eventRegForm").serialize();
$.ajax({
type: "POST",
url: "/forms/generic",
data: formData,
beforeSend: function(){
if(!isSubmitingForm) {
isSubmitingForm = true;
} else {
return false;
}
$("#eventRegForm").prepend("<div class='loading'>Loading...<div>");
},
success: function (responseText) {
$("#eventRegForm").clearForm();
isSubmitingForm = false;
$("#eventRegForm div.loading").fadeOut(function() {
if($("#eventRegForm div.message").get(0)) {
$("#eventRegForm div.message").remove()
}
$("#eventRegForm").before("<div class='message message-success'><h5>Thank you for taking the time to complete this form.</h5>Your submission was sent.</div>");
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('form#eventRegForm').fadeOut();
});
},
error: function (responseText) {
$("#eventRegForm").clearForm();
isSubmitingForm = false;
$("#eventRegForm div.loading").fadeOut(function() {
if($("#eventRegForm div.message").get(0)) {
$("#eventRegForm div.message").remove()
}
$("#eventRegForm div.line:eq(0)").before("<div class='message message-error'><h5>Error!</h5>An error has ocurred. Please try again.</div>");
});
}
});
},
rules: {
eventRegFormName: {
required: true
},
eventRegFormLastName: {
required: true
},
eventRegFormEmail: {
required: true
}
},
messages: {
},
errorPlacement: function(error, element) {
element.parent().addClass("input-text-error");
element.parent().addClass("textarea-error");
},
onsubmit: true,
onkeyup: false,
onfocusout: false
});
$("#eventRegForm a.button").click(function () {
$("#eventRegForm").submit();
});
});
我无法在实时站点上编辑现有脚本,但我可以在将加载到页面上的包含文件中添加新的 jQuery。这里需要的是我在表单中向 <select>
插入更多选项。使用这些新选项,现在需要 select 字段本身;第一个默认选项将是 blank/null 值。
在我的新 jQuery 代码中,它将 运行 在上面的脚本文件之后,如何添加更多规则,如果可能的话?需要的<select>
的ID为eventRegFormEventTitle.
参见jQuery Validation documentation for rules。
$('#eventRegFormEventTitle').rules('add',{required:true});
我正在处理具有以下现有脚本的客户站点:
/** Event Registration **/
var isSubmitingForm = false;
$(document).ready(function() {
$("#eventRegForm").validate({
invalidHandler: function(form, validator) {
$("#eventRegForm span.input-text-error").removeClass("input-text-error");
$("#eventRegForm div.textarea-error").removeClass("textarea-error");
},
submitHandler: function(form, validator) {
$("#eventRegForm span.input-text-error").removeClass("input-text-error");
$("#eventRegForm div.textarea-error").removeClass("textarea-error");
var formData = "ServerProcess=true&FriendlyName=Event Registration&" + $("#eventRegForm").serialize();
$.ajax({
type: "POST",
url: "/forms/generic",
data: formData,
beforeSend: function(){
if(!isSubmitingForm) {
isSubmitingForm = true;
} else {
return false;
}
$("#eventRegForm").prepend("<div class='loading'>Loading...<div>");
},
success: function (responseText) {
$("#eventRegForm").clearForm();
isSubmitingForm = false;
$("#eventRegForm div.loading").fadeOut(function() {
if($("#eventRegForm div.message").get(0)) {
$("#eventRegForm div.message").remove()
}
$("#eventRegForm").before("<div class='message message-success'><h5>Thank you for taking the time to complete this form.</h5>Your submission was sent.</div>");
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('form#eventRegForm').fadeOut();
});
},
error: function (responseText) {
$("#eventRegForm").clearForm();
isSubmitingForm = false;
$("#eventRegForm div.loading").fadeOut(function() {
if($("#eventRegForm div.message").get(0)) {
$("#eventRegForm div.message").remove()
}
$("#eventRegForm div.line:eq(0)").before("<div class='message message-error'><h5>Error!</h5>An error has ocurred. Please try again.</div>");
});
}
});
},
rules: {
eventRegFormName: {
required: true
},
eventRegFormLastName: {
required: true
},
eventRegFormEmail: {
required: true
}
},
messages: {
},
errorPlacement: function(error, element) {
element.parent().addClass("input-text-error");
element.parent().addClass("textarea-error");
},
onsubmit: true,
onkeyup: false,
onfocusout: false
});
$("#eventRegForm a.button").click(function () {
$("#eventRegForm").submit();
});
});
我无法在实时站点上编辑现有脚本,但我可以在将加载到页面上的包含文件中添加新的 jQuery。这里需要的是我在表单中向 <select>
插入更多选项。使用这些新选项,现在需要 select 字段本身;第一个默认选项将是 blank/null 值。
在我的新 jQuery 代码中,它将 运行 在上面的脚本文件之后,如何添加更多规则,如果可能的话?需要的<select>
的ID为eventRegFormEventTitle.
参见jQuery Validation documentation for rules。
$('#eventRegFormEventTitle').rules('add',{required:true});