在同一页面上验证两个表单

Question

我在同一网页上有两个表单，但我的验证脚本不起作用，即使所有输入名称都不同，表单ID也不同。

Fiddle

＆＃13;

＆＃13;

$(document).ready(function () {
    // Place ID's of all required fields here.
    required = ["namebud", "tlfbud", "budbud"];
    // If using an ID other than #email or #error then replace it here
    email = $("#emailbud");
    errornotice = $("#error");
    // The text to show up within a field when it is incorrect
    emptyerror = "Please write";
    emailerror = "Please write email";

    $("#formbud").submit(function () {
        //Validate required fields
        for (i = 0; i < required.length; i++) {
            var input = $('#' + required[i]);
            if ((input.val() === "") || (input.val() == emptyerror)) {
                input.addClass("needsfilled");
                input.val(emptyerror);
                errornotice.fadeIn(750);
            } else {
                input.removeClass("needsfilled");
            }
        }
        // Validate the e-mail.
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

        //if any inputs on the page have the class 'needsfilled' the form will not submit
        if ($(":input").hasClass("needsfilled")) {
            return false;
        } else {
            errornotice.hide();
            $(this).hide();
            $(".result").show();
            return true;
        }
    });
    // Clears any fields in the form when the user clicks on them
    $(":input").focus(function () {
        if ($(this).hasClass("needsfilled")) {
            $(this).val("");
            $(this).removeClass("needsfilled");
        }
    });
});


$(document).ready(function () {
    // Place ID's of all required fields here.
    required = ["messageride", "nameride", "tlfride"];
    // If using an ID other than #email or #error then replace it here
    email = $("#emailride");
    errornotice = $("#error");
    // The text to show up within a field when it is incorrect
     emptyerror = "Please write";
    emailerror = "Please write email";

    $("#formride").submit(function () {
        //Validate required fields
        for (i = 0; i < required.length; i++) {
            var input = $('#' + required[i]);
            if ((input.val() === "") || (input.val() == emptyerror)) {
                input.addClass("needsfilled");
                input.val(emptyerror);
                errornotice.fadeIn(750);
            } else {
                input.removeClass("needsfilled");
            }
        }
        // Validate the e-mail.
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

        //if any inputs on the page have the class 'needsfilled' the form will not submit
        if ($(":input").hasClass("needsfilled")) {
            return false;
        } else {
            errornotice.hide();
            $(this).hide();
            $(".result").show();
            return true;
        }
    });

    // Clears any fields in the form when the user clicks on them
    $(":input").focus(function () {
        if ($(this).hasClass("needsfilled")) {
            $(this).val("");
            $(this).removeClass("needsfilled");
        }
    });
});

＆＃13;

input.needsfilled, textarea.needsfilled {
    color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method="post" action="/mailboffer" id="formbud">
    <input type="text" name="namebud" id="namebud" placeholder="name" value="" />
    <input type="text" name="emailbud" id="emailbud" placeholder="mail" value="" />
    <input type="text" name="tlfbud" id="tlfbud" placeholder="tel" value="" />
    <input type="text" name="bud" id="budbud" placeholder="offer" value="" />
    <textarea name="messagebud" placeholder="comment"></textarea>
    <input type="submit" class="button darkblue bud" name="submit" value="Send" />
</form>
<br/>
<form method="post" action="/mailride" id="formride">
    <input type="text" name="nameride" id="nameride" placeholder="name" value="" />
    <input type="text" name="emailride" id="emailride" placeholder="mail" value="" />
    <input type="text" name="tlfride" id="tlfride" placeholder="trl" value="" />
    <textarea name="messageride" id="messageride" placeholder="message"></textarea>
    <input type="submit" class="button darkblue ride" name="submit" value="Send" />
</form>

＆＃13;

＆＃13;

＆＃13;

希望有人可以帮助我。

Answer 1

选择器＆＃34;：输入＆＃34;无论包含哪种形式，都将对所有输入字段起作用。我建议你在表单id之前添加你的选择器，就像这个$（＆＃34; #formride：input＆＃34;）这将确保验证和css类应用于正确的元素