Question

请提供一些建议或意见。我正在尝试验证多表单页面，但我不确定如何在jquery选择器中指定表单：

<form id="form_a">
    <label>First Name</name><input type="text" class="required"><br>
    <label>Email</label><input type="text" class="required">
<button onclick="validate('form_a')">Submit</button>
</form>

<form id="form_b">
    <label>Serial No </name><input type="text" class="required"><br>
    <label>Brand </label><input type="text" class="required">
<button onclick="validate('form_b')">Submit</button>
</form>

<form id="form_c">
    <label>First Name</name><input type="text" class="required"><br>
    <label>Email</label><input type="text" class="required">
<button onclick="validate('form_c')">Submit</button>
</form>

<script>
function validate(whichform) {

    $(whichform+" .required").each(function(i){
        if ($(this).val().indexOf() < 0){
        alert("null value detected")
        $(this).css("border","1px solid red")
        }
    });

}
</script>

Answer 1

试试这个。

$(document).ready(function(){
    $("button").click(function(e){
        e.preventDefault();
        $(this).parent().children('.required').each(function(){
            if ($(this).val().indexOf() < 0){
                alert("null value detected");
                $(this).css("border","1px solid red");
            }
        });
    });
});

从您的HTML中删除onclick=""。作为best practice，请尽量避免使用内联Javascript。 Fiddle

Answer 2

在你的caase中，你将id传递给方法，但你没有使用id选择器，如果你想阻止提交表单，你还必须从事件处理程序返回false

<button onclick="return validate('form_c')">Submit</button>

所以

function validate(whichform) {
    var valid = true;
    // whichform is the id so use id selector here
    $('#' + whichform + " .required").each(function (i) {
        if ($(this).val().length == 0) {
            alert("null value detected")
            $(this).css("border", "1px solid red")
            valid = false;
        } else {
            $(this).css("border", "")
        }
    });
    //return the valid state
    return valid;
}

演示：Fiddle

但更多jquerish解决方案是使用像

这样的jQuery事件处理程序

<form id="form_a">
    <label>First Name</label>
    <input type="text" class="required" />
    <br/>
    <label>Email</label>
    <input type="text" class="required" />
    <button>Submit</button>
</form>

然后

jQuery(function () {
    $('form').submit(function () {
        var valid = true;
        // whichform is the id so use id selector here
        $(this).find(".required").each(function (i) {
            if ($(this).val().length == 0) {
                alert("null value detected")
                $(this).css("border", "1px solid red")
                valid = false;
            } else {
                $(this).css("border", "")
            }
        });
        //return the valid state
        return valid;
    })
})

演示：Fiddle

Jquery在具有多个表单的页面上验证特定表单

2 个答案: