验证后的jquery警报答案

【问题标题】：jquery alert after validation验证后的jquery警报
【发布时间】：2021-06-19 23:18:22
【问题描述】：

除了我是 jquery 的初学者之外，我不确定自己做错了什么。我需要通过 ajax 将这些值发送到服务器，以便之后进行进一步的 dmas 计算，但验证不起作用

<script>
    $('#button').click( function() {
        $("#form").validate({
            rules: {
                input_one: {
                    required: true,
                    number: true
                },
                input_two: {
                    required: true,
                    number: true
                }
            },
            messages: {
                input_one: {
                    required: "1stinput is empty",
                    number: "invalid entry in 1st input"
                },
                input_two: {
                    required: "2nd input is empty",
                    number: "invalid entry in 2nd input"
                }
                
            },

            errorPlacement: function (error, element) {
                alert(error.text());
            },

        }).form();

    });

</script>

<form id="form" name="form" method="post" action="">
    Input one <input id="input_one" name="input_one" class="required" type="text" /><br><br>
    Input Two <input id="input_one" name="input_one" class="required" type="text" /><br><br>

    <button class="button" id="plus"> Plus </button>
    <button class="button" id="sub"> Minus</button>
    <button class="button" id="mul"> Multiply </button>
    <button class="button" id="div"> Divide </button><br><br><br> RESULT:
    <p id="result"></p>

</form>

【问题讨论】：

button 是一个类 .button 而不是 #button

标签： javascript jquery validation alert

【解决方案1】：

您的代码中有重复的名称。将第二个输入名称属性设为 'input_two'。在 jQuery validate 中也使用 submitHandler 方法。在这里，一旦所有输入字段的验证通过，您将获得表单。从 errorPlacement 函数中删除警报，因为在 JS 代码中使用警报不是很好的做法，请尝试使用 console.log 语句。

同时移除按钮点击事件。这里不需要点击处理程序，因为默认情况下，您的按钮将作为表单中的提交。

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js">  </script>
    <script>
        $(document).ready(function () {
            $("#form").validate({
                    rules: {
                        input_one: {
                            required: true,
                            number: true
                        },
                        input_two: {
                            required: true,
                            number: true
                        }
                    },
                    messages: {
                        input_one: {
                            required: "1stinput is empty",
                            number: "invalid entry in 1st input"
                        },
                        input_two: {
                            required: "2nd input is empty",
                            number: "invalid entry in 2nd input"
                        }

                    },

                    errorPlacement: function (error, element) {
                        console.log(error)
                    },
                    submitHandler: function (form) {
                        console.log('Form Submitted');
                        // It is optional submit form or use AJAX snippet here to make AJAX call
                      //  form.submit();
                    }

                });

            // $('.button').click(function () {
               
            // });

        });

    </script>
</head>

<body>
    <form id="form" name="form" method="post" action="">
        Input one <input id="input_one" name="input_one" class="required" type="text" /><br><br>
        Input Two <input id="input_one" name="input_two" class="required" type="text" /><br><br>

        <button class="button" id="plus" type="submit"> Plus </button>
        <button class="button" id="sub" > Minus</button>
        <button class="button" id="mul"> Multiply </button>
        <button class="button" id="div"> Divide </button><br><br><br> RESULT:
        <p id="result"></p>

    </form>
</body>

</html>

【讨论】：

它运行良好，只是询问者需要该警报，并且在错误后不断发出警报。使用：'error.insertAfter(element); ' 为了那个原因。顺便说一句，验证插件后也不需要这些消息