我有一个表单，其中包含不同数量的输入，一些是可见的，一些是隐藏的（它们是基于所选选项和无线电控件的条件）。我在下面有jQuery脚本，它可以浏览表单上的所有可见输入。
编辑按要求添加更多脚本。
var formInputs = jQuery('#Enquire :input:not(button):visible');
var enquiry = validateInputs(formInputs);
function validateInputs(inputs){
var nullCount = 0;
var errorCount = 0;
var reqdFields = {};
var formInputs = {};
var firstError = "";
var text = "";
inputs.each(function(){
if(jQuery(this).is(":visible")){ // will remove once I've got the answer
var name = jQuery(this).attr("name");
var value = jQuery(this).val();
if(jQuery(this).hasClass("error")){ errorCount++; }
var reqd = jQuery(this).attr('required');
var num = jQuery(this).attr('number');
var fieldType = jQuery(this).attr('type');
var errorLabel = "<label id=\"" + name + "-error\" class=\"error\" for=\"" + name + "\">This field is required.</label>";
var numerrorLabel = "<label id=\"" + name + "-error\" class=\"error\" for=\"" + name + "\">This field can only contain numeric characters.</label>";
//check if the field is required
if(typeof reqd !== typeof undefined && reqd !== false){
//check if the field's value is empty
if(value == null || value == ""){
nullCount++;
if(!(jQuery(this).hasClass("error"))){
debugLog("adding error class");
//perform the error report on the field
jQuery(this).addClass("error");
jQuery(this).after(errorLabel);
}
}
}
//check if the field is a number field
if(typeof num !== typeof undefined && num !== false){
//check if the field already has an error (null)
if(!(jQuery(this).hasClass("error"))){
if(!isNumeric(value)){
debugLog("adding error class");
//perform the error report on the field
jQuery(this).addClass("error");
jQuery(this).after(numerrorLabel);
}
}
}
//check if the field value is not empty
if(jQuery(this).val() != ""){
debugLog("Visible Field" + jQuery(this).attr("id"));
//check if the field is a checkbox / radio field which doesn't use IDs
if(fieldType == "radio" && jQuery(this).prop("checked")){
outputdata[name] = value;
}
else{
outputdata[name] = value;
}
}
else{
//here we flag the first required field's ID so we can scroll to it later
if(nullCount == 1){
firstError = jQuery(this).attr("id");
debugLog("First Error" + firstError);
}
debugLog("Null value for "+name);
}
}
});
debugLog(nullCount);
debugLog(reqdFields);
debugLog(errorCount);
debugLog(outputdata);
Errors = errorCount;
if(nullCount !== 0){
debugLog("throw Error on screen");
jQuery('html, body').animate({
scrollTop: (jQuery("#"+firstError).offset().top)-40
}, 1000);
}else{
return outputdata;
}
};
我发现除了单选按钮和复选框之外，一切似乎都能正常工作，因为它似乎默认最后一个具有相同名称的输入。 HTML下面：
<form role="form" class="clearfix Form DonationForm" id="Enquire">
<fieldset>
<div class="form-group col-lg-12 no-padding">
<div class="form-group col-lg-2 no-left-padding no-margin">
<label for="Title" class="control-label col-sm-12 no-padding">Title</label>
<div class="col-sm-12 no-padding">
<select id="Title" name="Title" class="form-control" required type="select">
<option value="">Title:</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
<option value="Hon">Hon</option>
<option value="Rev">Rev</option>
</select>
</div>
</div>
<div class="form-group col-lg-5 no-padding no-margin">
<label for="FirstName" class="control-label col-sm-12 no-padding">First Name</label>
<div class="col-sm-12 no-padding">
<input type="text" class="form-control" id="FirstName" name="FirstName" placeholder="First Name" required minlength="2">
</div>
</div>
<div class="form-group col-lg-5 no-right-padding no-margin">
<label for="Surname" class="control-label col-sm-12 no-padding">Surname</label>
<div class="col-sm-12 no-padding">
<input type="text" class="form-control" id="Surname" name="Surname" placeholder="Surname" required minlength="2">
</div>
</div>
</div>
<div class="form-group col-lg-6 no-padding">
<label class="control-label col-sm-12 no-padding" for="EnquiryType">Enquiry Type</label>
<div class="controls text-left col-sm-6 no-left-padding">
<label><input type="radio" class="EnquiryType" name="EnquiryType" id="Sales" value="Sales" required>Sales</label>
</div>
<div class="controls text-left col-sm-6 no-right-padding">
<label><input type="radio" class="EnquiryType" name="EnquiryType" id="Service" value="Service" required>Service</label>
</div>
</div>
<div class="form-group">
<div class="controls col-sm-12 no-padding">
<input type="hidden" id="ReferenceNo" name="ReferenceNo" value="<?php echo genTicketString(); ?>">
<a class="btn btn-success" href="javascript:;" id="EnquireBtn">Enquire Now</a>
<!--input class="btn btn-success" type="submit" value="Enquire Now"-->
</div>
</div>
</fieldset>
</form>
我目前正在将所有内容记录到控制台以观察正在发生的事情，无论我的选择如何，输出始终为EnquiryType: Service
试图＆＃34;赶上＆＃34;这个特殊的问题，我改变了这个：
if(jQuery(this).val() != ""){
debugLog("Visible Field" + jQuery(this).attr("id"));
formInputs[name] = value;
}
对此：
if(jQuery(this).val() != ""){
debugLog("Visible Field" + jQuery(this).attr("id"));
//check if the field is a checkbox / radio field which doesn't use IDs
if(fieldType == "radio" && jQuery(this).prop("checked")){
formInputs[name] = value;
}
else{
formInputs[name] = value;
}
}
有什么建议吗？我希望尽可能保持脚本动态，并且它适用于所有其他输入类型，所以我想解决这个问题。
答案 0 :(得分：0)
问题在于我不想发表多个if()陈述：
//check if the field value is not empty
if(jQuery(this).val() != ""){
debugLog("Visible Field" + jQuery(this).attr("id"));
//check if the field is a checkbox / radio field which doesn't use IDs
if(fieldType == "radio" && jQuery(this).prop("checked")){
outputdata[name] = value;
}
else{
outputdata[name] = value;
}
}
上面的代码部分将获得第一个无线电的名称和值，这将是很好的，当它循环回到下一个input时，它将覆盖先前分配的名称和值。我将if()语句更改为以下，我的问题已解决。
//check if the field is a checkbox / radio field which doesn't use IDs
if(fieldType == "radio")
{
if(jQuery(this).prop("checked"))
{
fieldid = jQuery(this).attr("id").toString();
if (document.getElementById(fieldid).checked)
{
formInputs[name] = value;
}
}
}