Jquery 表单验证与隐藏字段一起使用

你好。感谢Derek和Ross的大力协助，我成功地制作了一个带有验证选项的表单。具体来说，页面包含3个表单，其中只有一个表单根据下拉列表显示。除了一件事之外，一切似乎都运转良好。我无法提交表单，因为在其他两个隐藏表单中包含未填充的字段。我如何克服这个问题？我认为这是向jquery添加一个部分的问题，它将在验证过程中忽略隐藏的元素。但不幸的是，我不知道如何做到这一点。下面的代码：

HTML:

报价请求
一般查询
反馈


名称


电子邮件


消息


推荐人


请求报价


名称


电子邮件


消息


推荐人


发送您的消息
一般反馈
网站反馈
提供的服务反馈


名称


电子邮件


消息


推荐人


发送您的反馈

jQuery：

 $(function () {
var addErrorMessage = function (field) {
        var err = $(document.createElement('p')).addClass('validation-error').text('Required field');
        field.addClass('err').after(err);
    },
    clearError = function () {
        var t = $(this);
        if (t.hasClass('err')) {
            t.removeClass('err');
            t.next('p').empty().remove();
        }
    },
    isEmpty = function (str) {
        return str.trim().length < 1;
    },
    isValidEmail = function (str) {
        var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regexp.test(str);
    },
    validateForm = function () {
        var requiredFields = $(this).find('.required'),
            email = $('#email'),
            fieldsValidate = true;

        // check that required fields are not empty
        requiredFields.each(function () {
            var t = $(this);
            if (isEmpty(t.val())) {
                fieldsValidate = false;
                if (!t.hasClass('err')) {
                    addErrorMessage(t);
                }
            }
        });

        // check that email is valid
        if (!isValidEmail(email.val().trim())) {
            fieldsValidate = false;
            if (!email.hasClass('err')) {
                addErrorMessage(email);
            }
        }
        return fieldsValidate;
    };

$('input, textarea').keyup(clearError);
$('#form1').submit(validateForm);




var $select = $("#selector");
$select.change(function () {
    if ($('#selector option:selected').attr("id") == "opt1") {
        if ($('#form1').is(":hidden")) {
            $('#form1').fadeIn(500);
        }
        $('#form2').hide();
        $('#form3').hide();
    }
    if ($('#selector option:selected').attr("id") == "opt2") {
        if ($('#form2').is(":hidden")) {
            $('#form2').fadeIn(500);
        }
        $('#form1').hide();
        $('#form3').hide();
    }
    if ($('#selector option:selected').attr("id") == "opt3") {
        if ($('#form3').is(":hidden")) {
            $('#form3').fadeIn(500);
        }
        $('#form1').hide();
        $('#form2').hide();
    }
});
});

$（函数（）{
var addErrorMessage=函数（字段）{
var err=$（document.createElement（'p'））.addClass（'validation-error'）.text（'Required field'）；
field.addClass（'err'）。在（err）之后；
},
clearError=函数（）{
var t=$（本）；
if（t.hasClass（'err'））{
t、 removeClass（'err'）；
t、 next（'p'）.empty（）.remove（）；
}
},
isEmpty=函数（str）{
返回修剪（）长度<1；
},
isValidEmail=函数（str）{
变量regexp=/^（[a-zA-Z0-9\.-\+]）+\@（[a-zA-Z0-9\-]）+）+（[a-zA-Z0-9]{2,4}）+$/；
返回regexp.test（str）；
},
validateForm=函数（）{
var requiredFields=$（this）.find（'.required'），
电子邮件=$（“#电子邮件”），
fieldsValidate=true；
//检查必填字段是否为空
必填字段。每个（函数（）{
var t=$（本）；
if（isEmpty（t.val（）））{
fieldsValidate=false；
如果（！t.hasClass（'err'））{
附加错误消息（t）；
}
}
});
//检查电子邮件是否有效
如果（！isValidEmail（email.val（）.trim（）））{
fieldsValidate=false；
如果（！email.hasClass（'err'））{
补充信息（电子邮件）；
}
}
返回字段验证日期；
};
$（'input，textarea'）.keyup（clearError）；
$（'表格1'）。提交（validateForm）；
var$select=$（“#选择器”）；
$select.change（函数（）{
if（$（“#选择器选项：已选定”）.attr（“id”）=“opt1”）{
如果（$（'#form1'）。是（“：hidden”））{
美元("表格1").法代因(500),；
}
$（'#form2'）.hide（）；
$（'#form3'）.hide（）；
}
if（$（“#选择器选项：选定”）.attr（“id”）=“opt2”）{
如果（$（'#form2'）。是（“：hidden”））{
美元("表格2").法代因(500),；
}
$（'#form1'）.hide（）；
$（'#form3'）.hide（）；
}
if（$（“#选择器选项：选定”）.attr（“id”）=“opt3”）{
如果（$（'#form3'）。是（“：hidden”））{
美元("表格3").法代因(500),；
}
$（'#form1'）.hide（）；
$（'#form2'）.hide（）；
}
});
});

---

如果表单不是动态的，那么只需检查id并拒绝任何应该为空的匹配隐藏元素即可

这花了我一些时间来解决。你的代码有一些问题。您对不同表单中的字段具有相同的id，因此当您提交表单时，他总是从第一个表单中获取字段，即使您是在第二个或第三个表单上书写。
我在函数中添加了一个参数，并在提交按钮上添加了一个单击函数。还有一些小事情，我改正了，但忘了是怎么回事。我将

keyup

更改为

blur

。如果人们使用autocomplete更方便用户，如果您不喜欢，请更改回

可能还有一些小问题需要解决。但我想你想要的是这里。
我添加了一些

console.log（）这对于您将来的调试是个好主意：）

HTML:


报价请求
一般查询
反馈


名称


电子邮件


消息


推荐人


请求报价


名称


电子邮件


消息


推荐人


发送您的消息
一般反馈
网站反馈
提供的服务反馈


名称


电子邮件


消息


推荐人


把你的反馈给我
 $(function () {
var addErrorMessage = function (field) {
        var err = $(document.createElement('p')).addClass('validation-error').text('Required field');
        field.addClass('err').after(err);
    },
    clearError = function () {
        var t = $(this);
        if (t.hasClass('err')) {
            t.removeClass('err');
            t.next('p').empty().remove();
        }
    },
    isEmpty = function (str) {
        return str.trim().length < 1;
    },
    isValidEmail = function (str) {
        var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regexp.test(str);
    },
    validateForm = function () {
        var requiredFields = $(this).find('.required'),
            email = $('#email'),
            fieldsValidate = true;

        // check that required fields are not empty
        requiredFields.each(function () {
            var t = $(this);
            if (isEmpty(t.val())) {
                fieldsValidate = false;
                if (!t.hasClass('err')) {
                    addErrorMessage(t);
                }
            }
        });

        // check that email is valid
        if (!isValidEmail(email.val().trim())) {
            fieldsValidate = false;
            if (!email.hasClass('err')) {
                addErrorMessage(email);
            }
        }
        return fieldsValidate;
    };

$('input, textarea').keyup(clearError);
$('#form1').submit(validateForm);




var $select = $("#selector");
$select.change(function () {
    if ($('#selector option:selected').attr("id") == "opt1") {
        if ($('#form1').is(":hidden")) {
            $('#form1').fadeIn(500);
        }
        $('#form2').hide();
        $('#form3').hide();
    }
    if ($('#selector option:selected').attr("id") == "opt2") {
        if ($('#form2').is(":hidden")) {
            $('#form2').fadeIn(500);
        }
        $('#form1').hide();
        $('#form3').hide();
    }
    if ($('#selector option:selected').attr("id") == "opt3") {
        if ($('#form3').is(":hidden")) {
            $('#form3').fadeIn(500);
        }
        $('#form1').hide();
        $('#form2').hide();
    }
});
});

<select id='selector'>
    <option value='opt1' id="opt1">Quote Request</option>
    <option value='opt2' id="opt2">General Enquiry</option>
    <option value='opt3' id="opt3">Feedback</option>
</select>
<form method="post" id="form1" class="form" action="scripts/form-quote.php">
    <ul>
        <li>
            <label for="name">Name</label>
            <input id="namef1" name="name" type="text" placeholder="Name" class="required" />
        </li>
        <li>
            <label for="email">E-mail</label>
            <input id="emailf1" name="email" type="text" placeholder="E-mail" class="required" />
        </li>
        <li>
            <label for="msg">Message</label>
            <textarea id="msgf1" name="msg" cols="43" rows="8" placeholder="Please specify your requirements" class="required"></textarea>
        </li>
        <li>
            <label for="ad">Referrer</label>
            <input id="adf1" name="ad" type="text" placeholder="Where did you hear about us?" />
        </li>
    </ul>
    <button type="submit" class="submit">Request a quote</button>
</form>
<form method="post" id="form2" class="form" action="scripts/form-general.php">
    <ul>
        <li>
            <label for="name">Name</label>
            <input id="namef2" name="name" type="text" placeholder="Name" class="required" />
        </li>
        <li>
            <label for="email">E-mail</label>
            <input id="emailf2" name="email" type="text" placeholder="E-mail" class="required" />
        </li>
        <li>
            <label for="msg">Message</label>
            <textarea id="msgf2" name="msg" cols="43" rows="8" placeholder="Please enter your message" class="required"></textarea>
        </li>
        <li>
            <label for="ad">Referrer</label>
            <input id="adf2" name="ad" type="text" placeholder="Where did you hear about us?" />
        </li>
    </ul>
    <button type="submit" class="submit">Send your message</button>
</form>
<form method="post" id="form3" class="form" action="scripts/form-feedback.php">
    <select>
        <option value='General feedback'>General feedback</option>
        <option value='Website feedback'>Website feedback</option>
        <option value='Services feedback'>Provided services feedback</option>
    </select>
    <ul>
        <li>
            <label for="name">Name</label>
            <input id="namef3" name="name" type="text" placeholder="Name" class="required" />
        </li>
        <li>
            <label for="email">E-mail</label>
            <input id="emailf3" name="email" type="text" placeholder="E-mail" class="required" />
        </li>
        <li>
            <label for="msg">Message</label>
            <textarea id="msgf3" name="msg" cols="43" rows="8" placeholder="Your feedback" class="required"></textarea>
        </li>
        <li>
            <label for="ad">Referrer</label>
            <input id="adf3" name="ad" type="text" placeholder="Where did you hear about us?" />
        </li>
    </ul>
    <button type="submit" class="submit">Send your feedback</button>
</form>

var addErrorMessage = function (field) {
    var err = $(document.createElement('p')).addClass('validation-error').text('Required field');
    field.addClass('err').after(err);
},
clearError = function () {
    var t = $(this);
    if (t.hasClass('err')) {
        t.removeClass('err');
        t.next('p').empty().remove();
    }
},
isEmpty = function (str) {
    return str.trim().length < 1;
},
isValidEmail = function (str) {
    var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regexp.test(str);
},
fieldsValidate = false;

function validateForm(e) {
    console.log('validate start');
    var requiredFields = jQuery(e).find('.required');
    var email = jQuery(e).find('input[name="email"]');
    var emailValue = email.val();
    console.log(emailValue+' mail val');
    fieldsValidate = true;
    // check that required fields are not empty
    requiredFields.each(function () {
        var t = $(this);
        if (isEmpty(t.val())) {
            fieldsValidate = false;
            if (!t.hasClass('err')) {
                addErrorMessage(t);
            }
        }
    });

    // check that email is valid
    console.log(isValidEmail(emailValue) + ' valid?');

    if (!isValidEmail(emailValue)) {
        fieldsValidate = false;
        if (!email.hasClass('err')) {
            addErrorMessage(email);
            console.log('mail NOT ok');
        }
    }
    console.log(fieldsValidate + ' before return');
    return fieldsValidate;
};

$('input, textarea').blur(clearError);

$(".submit").click(function() { return validateForm(this.form) });

var $select = $("#selector");
$select.change(function () {

    if ($('#selector option:selected').attr("id") == "opt1") {
        if ($('#form1').is(":hidden")) {
            $('#form1').fadeIn(500);
        }
        $('#form2').hide();
        $('#form3').hide();
    }
    if ($('#selector option:selected').attr("id") == "opt2") {
        if ($('#form2').is(":hidden")) {
            $('#form2').fadeIn(500);
        }
        $('#form1').hide();
        $('#form3').hide();
    }
    if ($('#selector option:selected').attr("id") == "opt3") {
        if ($('#form3').is(":hidden")) {
            $('#form3').fadeIn(500);
        }
        $('#form1').hide();
        $('#form2').hide();
    }
});