Question

我有一个HTML5 Web应用程序，其中包含许多用户输入的字段，我希望在将这些字段发送到服务器之前对这些字段进行一些客户端验证。容易吗？只需使用JQuery验证插件--- http://jqueryvalidation.org/

但是有一个问题。我的网络应用没有表格。 HTML中没有提交任何内容。相反，每个用户可更改的元素都有一个JQuery更改处理程序，当用户更改其中一个元素的值时，将进行AJAX调用。（这种非标准的用户交互架构对此应用程序有意义。）

我想在AJAX调用之前验证该字段，并使用JQuery验证插件来执行此操作。但我无法弄清楚如何。

是否可以在没有提交的情况下使用JQuery验证插件？我该怎么做？或者更好的另一种方法是什么？

Answer 1

首先，最重要的是，您必须将您的输入元素包装在<form></form>标记内，以便jQuery Validate插件运行。但是，不需要提交按钮。

其次，您可以使用the .valid() method以编程方式触发任何或所有元素的有效性测试而无需提交按钮。

$(document).ready(function() {

    $('#myform').validate({  // initialize the plugin on your form.
        // rules, options, and/or callback functions
    });

    // trigger validity test of any element using the .valid() method.
    $('#myelement').valid();

    // trigger validity test of the entire form using the .valid() method.
    $('#myform').valid();

    // the .valid() method also returns a boolean...
    if ($('#myform').valid()) {
        // something to do if form is valid
    }

});

DEMO ：http://jsfiddle.net/URQGG/

Answer 2

您必须在表单中包装您的字段才能使用验证插件，无论如何它都是good practice。此外，您可以通过编程方式调用插件的验证，并通过执行以下操作检查表单是否有效：

var $form = $('#your_form'),
    validator = $form.validate({...});

//validate the form
validator.form();

//check if the form is valid 
if ($form.valid()) {
    //form is valid
}

有关更多选项，请查看docs。

Answer 3

我创造了一个小帮手。只需添加这行代码，然后就可以在任何地方使用任何按钮。

$("body [data-submit-form]").on("click", function (event) {
    $("#" + $(event.target).data('submit-form')).valid();
});

<form id="component-form">

</form>

<button data-submit-form="component-form">Button</button>

说明：jquery代码侦听具有属性“data-submit-form”的元素的所有单击，在侦听器中提取data-attribute然后在匹配表单上触发有效方法。

注意：如果您希望在表格有效时提交表格，请使用以下代码：

$("body [data-submit-form]").on("click", function (event) {
    var form = $("#" + $(event.target).data('submit-form'));
    if (form.valid()) {
        form.submit();
    }
});

Answer 4

将此代码用于两个示例字段电子邮件和密码：-

<head>
    <script src="jquery-3.4.0.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #txt1{

        margin-left:23px;
        border-radius: 12px;
       }
       #txt2{
        border-radius: 12px;
       }
       #btn1{
        border-radius: 12px;
        width: 8em;  height: 2em;
        cursor:pointer;
        background-color: #008CBA;
       }
       #lbl1,#lbl2{
        font-family: "Comic Sans MS", cursive, sans-serif;
        color:red;
       }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <center> <label id="lbl1">Email: </label><input type="text" id="txt1"></center></input><br>
            <center><label id="lbl2">Password: </label><input type="password" id="txt2"></center></input>
            <br><br>
            <center><input type="button" id="btn1" name="btn1" value="Login" style="color:darkblue;font-size:15px;"></center></input>
        </form>

    </div>
    <script>
        $(document).ready(function () {
            $('#btn1').click(function () {
                var email = $('#txt1').val();
                var pass = $('#txt2').val();
                if (email == '') {
                    $('input[type="text"]').css("border", "2px solid red");
                    $("#txt1").parent().after("<div class='validation' style='color:red;margin-left:93px;'><center>Please enter email address</center></div>");
                    alert("hi");
                }
                else {

                }
                if (pass == '') {
                    $('input[type="password"]').css("border", "2px solid red");
                    $("#txt2").parent().after("<div class='validationp' style='color:red;margin-left:70px;'><center>Please enter password</center></div>");
                }
                $('input[type="text"]').keydown(function () {
                    $('input[type="text"]').css("border", "");
                    $(".validation").remove();
                });
                $('input[type="password"]').keydown(function () {
                    $('input[type="password"]').css("border", "");
                    $(".validationp").remove();

                });

            });
        });

    </script>
</body>

</html>

Answer 5

只需使用jquery

调用表单提交方法

$("#formId").submit()

这将验证整个表单，与我们单击提交按钮时一样

使用JQuery验证验证字段而不提交任何内容？

5 个答案: