我有JavaScript表格验证,它正常工作,但我需要验证形式的东西,我有一个收音机是否如果选择是,然后弹出另一个框,但我需要它,所以如果他们点击是的输入也是必需的。 所以这就是我的所有代码:
$(document).ready(function(){
//$( "#datepicker" ).datepicker();
//global vars
var form = $("#closecall");
var datepicker = $("#datepicker");
var datepicker_info = $("#datepicker_info");
var hr = $("#hr");
var min = $("#min");
var project = $("#project");
var project_info = $("#project_info");
var des_event = $("#event");
var event_info = $("#event_info");
var happened = $("#happened");
var happened_info = $("#happened_info");
var about = $("#about_it");
var about_info = $("#about_info");
var organisation = $("#organisation");
var organisation_info = $("#organisation_info");
var region = $("#region");
var region_info = $("#region_info");
var rules = $(".rules");
var liferules = $("#liferules");
var rules_info = $("#rules_info");
var end_info = $("#end_info");
//On blur
datepicker.blur(validateDatepicker);
project.blur(validateProject);
des_event.blur(validateEvent);
happened.blur(validateHappened);
about.blur(validateAbout);
organisation.blur(validateOrganisation);
region.blur(validateRegion);
liferules.blur(validateLiferules);
//On key press
datepicker.keyup(validateDatepicker);
project.keyup(validateProject);
des_event.keyup(validateEvent);
happened.keyup(validateHappened);
about.keyup(validateAbout);
organisation.keyup(validateOrganisation);
region.keyup(validateRegion);
liferules.keyup(validateLiferules);
//On Submitting
form.submit(function(){
if(validateDatepicker() & validateProject() & validateEvent() & validateHappened() & validateAbout() & validateOrganisation() & validateRegion() & validateLiferules()){
$("#submit").prop("disabled", true);
$("#submit").prop("value", "Sending...");
end_info.removeClass("info_error");
return true;
}else{
return false;
}
});
//validation functions
function validateDatepicker(){
//it's NOT valid
if(datepicker.val().length < 1){
datepicker.addClass("error");
hr.addClass("error");
min.addClass("error");
datepicker_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
datepicker.removeClass("error");
hr.removeClass("error");
min.removeClass("error");
datepicker_info.removeClass("info_error");
end_info.removeClass("info_error");
return true;
}
}
function validateProject(){
//it's NOT valid
if(project.val().length < 1){
project.addClass("error");
project_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
project.removeClass("error");
project_info.removeClass("info_error");
end_info.removeClass("info_error");
return true;
}
}
function validateEvent(){
//it's NOT valid
if(des_event.val().length < 1){
des_event.addClass("error");
event_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
des_event.removeClass("error");
event_info.removeClass("info_error");
return true;
}
}
function validateHappened(){
//it's NOT valid
if(happened.val().length < 1){
happened.addClass("error");
happened_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
happened.removeClass("error");
happened_info.removeClass("info_error");
return true;
}
}
function validateAbout(){
//it's NOT valid
if(about.val().length < 1){
about.addClass("error");
about_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
about.removeClass("error");
about_info.removeClass("info_error");
return true;
}
}
function validateOrganisation(){
//it's NOT valid
if(organisation.val().length < 1){
organisation.addClass("error");
organisation_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
organisation.removeClass("error");
organisation_info.removeClass("info_error");
return true;
}
}
function validateRegion(){
//it's NOT valid
if(region.val().length < 1){
region.addClass("error");
region_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
region.removeClass("error");
region_info.removeClass("info_error");
return true;
}
}
function validateLiferules(){
if (rules.attr("value") == "Yes" & liferules.val().length < 1) {
liferules.addClass("error");
rules_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}else{
liferules.removeClass("error");
rules_info.removeClass("info_error");
return true;
}
});
}
这是我选择无线电是时需要使用该字段的功能:
function validateLiferules(){
if (rules.attr("value") == "Yes" & liferules.val().length < 1) {
liferules.addClass("error");
rules_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}else{
liferules.removeClass("error");
rules_info.removeClass("info_error");
return true;
}
}
但是只要我把它放入其中就会打破整个表单验证。
复选框的HTML
<li><label for="rules"><i>* </i>Potential Breach of Life Saving Rules? (Not Applicable to Airports):</label></li>
<li>
<input type="radio" name="rules" class="rules" value="Yes" ><span>Yes</span>
<input type="radio" name="rules" class="rules" value="No"checked><span>No</span>
</li><br />
<li class="liferules" style="display: none;"><label for="liferules"><i>* </i>Life Saving Rules (Not Applicable to Airports):<i class="required" id="rules_info">Required</i></label></li>
<li class="liferules" style="display: none;">
<select name="life_rules" id="liferules">
<option value="">Please Select!</option>
<option value="Working with electricity">Working with electricity</option>
<option value="Working with electricity-test before touch">Working with electricity-test before touch</option>
<option value="Always obey the speed limit and wear a seat belt.">Always obey the speed limit and wear a seat belt.</option>
<option value="Never use a hand-held or hands-free phone, or programme any other mobile device, while driving.">Never use a hand-held or hands-free phone, or programme any other mobile device, while driving.</option>
<option value="Working at height-without a harness">Working at height-without a harness</option>
<option value="Equipment fit for intended purpose">Equipment fit for intended purpose</option>
<option value="Under the influence of Drugs or Alcohol">Under the influence of Drugs or Alcohol</option>
<option value="Wasn't trained for the job at hand">Wasn't trained for the job at hand</option>
<option value="Entered exclusion zone(Without permission)">Entered exclusion zone(Without permission)</option>
<option value="Plans and Permits Weren't in place before Job">Plans and Permits Weren't in place before Job</option>
</select>
</li><br />
答案 0 :(得分:0)
您应该使用表单提交处理程序的第一个参数调用event.preventDefault()
。
form.submit(function(event) {
if(isCorrect() === false) { // dummy function
event.preventDefault() // This cancel form submit
}
});
答案 1 :(得分:0)
如果我理解正确,你有一个包含“规则”类的复选框。
然后你的验证功能应该是:
function validateLiferules(){
// use rules.is(":checked") to check if the check box is checked
if (rules.is(":checked") && liferules.val().length < 1) {
liferules.addClass("error");
rules_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}else{
liferules.removeClass("error");
rules_info.removeClass("info_error");
return true;
}
}
此外,你应该使用逻辑&amp;&amp;运算符而不是按位&amp;运营商不是吗?