jquery - 结合隐藏字段的表单验证

Question

再会。多亏了 Derek 和 Ross 的大力帮助，我设法将一个带有验证选项的表单放在一起。具体而言，该页面包含 3 个表单，根据下拉列表仅显示一个表单。除了一件事，一切似乎都完美无缺。我无法提交表单，因为在其他 2 个隐藏表单中包含未填写的字段。我该如何克服这个问题？我认为这是在 jquery 中添加一个在验证过程中将忽略隐藏元素的部分的问题。但不幸的是我不知道该怎么做。下面的代码：

HTML：

    <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 action="" method="post" id="form1" class="form" action="scripts/form-quote.php">
        <ul>
            <li>
                <label for="name">Name</label>
                <input id="name" name="name" type="text" placeholder="Name" class="required"/>
            </li>
            <li>
                <label for="email">E-mail</label>
                <input id="email" name="email" type="text" placeholder="E-mail" class="required"/>
            </li>
            <li>
                <label for="msg">Message</label>
                <textarea id="msg" name="msg" cols="43" rows="8" placeholder="Please specify your requirements" class="required"></textarea>
            </li>
            <li>
                <label for="ad">Referrer</label>
                <input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" />
            </li>
        </ul>
        <button type="submit" class="submit">Request a quote</button>

</form>

<form action="" method="post" id="form2" class="form" action="scripts/form-general.php">
        <ul>
            <li>
                <label for="name">Name</label>
                <input id="name" name="name" type="text" placeholder="Name" class="required"/>
            </li>
            <li>
                <label for="email">E-mail</label>
                <input id="email" name="email" type="text" placeholder="E-mail" class="required"/>
            </li>
            <li>
                <label for="msg">Message</label>
                <textarea id="msg" name="msg" cols="43" rows="8" placeholder="Please enter your message" class="required"></textarea>
            </li>
            <li>
                <label for="ad">Referrer</label>
                <input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" />
            </li>
        </ul>
        <button type="submit" class="submit">Send your message</button>

</form>

<form action="" 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="name" name="name" type="text" placeholder="Name" class="required"/>
            </li>
            <li>
                <label for="email">E-mail</label>
                <input id="email" name="email" type="text" placeholder="E-mail" class="required"/>
            </li>
            <li>
                <label for="msg">Message</label>
                <textarea id="msg" name="msg" cols="43" rows="8" placeholder="Your feedback" class="required"></textarea>
            </li>
            <li>
                <label for="ad">Referrer</label>
                <input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" />
            </li>
        </ul>
        <button type="submit" class="submit">Send your feedback</button>

</form>

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();
    }
});
});

还有这里的 jsFiddle

Answer 1

小提琴

这花了我一些时间来解决。你的代码有一些问题。您在不同表单中的字段具有相同的 id，因此当您提交表单时，他总是从第一个表单中获取字段，即使您是在 2 日或 3 日写作。
我在您的函数中添加了一个参数，并在提交按钮上添加了一个单击功能。还有一些小事情，我更正了，但忘记了一路上发生了什么。我将其更改keyup为blur. 如果人们使用自动完成功能，它对用户更友好，如果您不喜欢，请改回来。

可能还有一些小问题需要解决。但我想你想要的就在这里。
我添加了一些console.log();，这对您未来的调试来说是个好主意:)

HTML：

<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>

JS：

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();
    }
});

Answer 2

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