Question

当我运行此表单时，如果任何字段未满足要求，则所有字段都将显示有问题的消息（未满足要求）。

如何解决验证过程？我的意思是，当任何字段出现问题时，如果没有满足要求，则仅显示该字段显示消息。 ........

<form id="form" action="">
      <input type="text" name="" id="name" placeholder="Enter your name"><span id="name-feedback"></span><br>
      <input type="password" name="" id="password" placeholder="Enter your password"><span id="password-feedback"></span><br>
      <input type="range" min="1" max="10" value="7" name="" id="amount"><span id="amount-feedback"></span><br>
      <textarea name="" id="message" cols="30" rows="10"></textarea><span id="message-feedback"></span><br><br>
      <input type="checkbox" name="cb" id="checkbox" checked><label for="cb">check me</label><span id="checkbox-feedback"></span><br><br>


<!-- language: lang-js -->

    $(function () {
        $("#form").submit(function (event) {
            var name = $("#name").val();
            var password = $("#password").val();
            var message = $("#message").val();
            var checked = $("#checked").is(":checked");

            validateNameFiled(name, event);
            validatePasswordFiled(password, event);
            validateMessageFiled(message, event);
            validateCheckboxFiled(checked, event);
        });
    });

    function isValidName(name) {
        return name.length >= 3;
    }
    function isValidPassword(password) {
        return password.length>=6 && /.*[0-9].*/.test(password);
    }
    function isValidMessage(message) {
        return message.trim() != "";
    }


    function validateNameFiled(name, event) {
        if (!isValidName(name)) {
            $("#name-feedback").text("please enter at list 3 carectars");
            event.preventDefault();
        } else {
            $("name-feedback").text("");
        }
    }

    function validatePasswordFiled(password, event) {
        if (!isValidPassword(password)) {
            $("#password-feedback").text("please enter atlist 6 carecters  and a number");
            event.preventDefault();
        } else {
            $("#password-feedback").text("");
        }
    }

    function validateMessageFiled(message, event) {
        if (!isValidMessage(message)) {
            $("#message-feedback").text("please enter the message.");
            event.preventDefault();
        } else {
            $("#message-feedback").text("");
        }
    }

    function validateCheckboxFiled(isChecked, event) {
        if (!isChecked) {
            $("#checkbox-feedback").text("Please agree to this.");
            event.preventDefault();
        } else {
            $("#checkbox-feedback").text("");
        }
    }

Answer 1

这是解决的jquery。

<!-- language: lang-js -->

    $(function() {
        $("#form").submit(function(event) {
            var name = $("#name").val();
            var password = $("#password").val();
            var message = $("#message").val();
            var checked = $("#checkbox").is(":checked");

            validateNameFiled(name, event);
            validatePasswordFiled(password, event);
            validateMessageFiled(message, event);
            validateCheckboxFiled(checked, event);
        });
    });




    function validateNameFiled(name, event) {
        if (!isValidName(name)) {
            $("#name-feedback").text("please enter at list 3 carectars");
            event.preventDefault();
        } else {
            $("#name-feedback").text("");
        }
    }

    function validatePasswordFiled(password, event) {
        if (!isValidPassword(password)) {
            $("#password-feedback").text("please enter atlist 6 carecters  and a number");
            event.preventDefault();
        } else {
            $("#password-feedback").text("");
        }
    }

    function validateMessageFiled(message, event) {
        if (!isValidMessage(message)) {
            $("#message-feedback").text("please enter the message.");
            event.preventDefault();
        } else {
            $("#message-feedback").text("");
        }
    }

    function validateCheckboxFiled(isChecked, event) {
        if (!isChecked) {
            $("#checkbox-feedback").text("Please agree  to this");
            event.preventDefault();
        } else {
            $("#checkbox-feedback").text("")
        }
    }


    function isValidName(name) {
        return name.length >= 3;
    }
    function isValidPassword(password) {
        return password.length>=6 && /.*[0-9].*/.test(password);
    }
    function isValidMessage(message) {
        return message.trim() != "";
    }

<!-- end snippet -->

我该如何解决提交验证问题

1 个答案: