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

时间:2021-03-16 11:50:20

I have a HTML5 web application with numerous user-entered fields, and I would like to do some client-side validation on those fields in javascript before sending them to the server. Easy right? Just use JQuery validation plugin --- http://jqueryvalidation.org/

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

But there's a catch. My web app has no forms. There is no submit anywhere in the HTML. Instead there's a JQuery change handler on every user-changeable element, and when the user changes the value of one of those element, an AJAX call is made. (This nonstandard user interaction architecture makes sense for this application.)

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

I would like to validate the field before the AJAX call, and use the JQuery validation plugin to do that. But I can't figure out how.

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

Is it possible to use the JQuery validation plugin without a submit anywhere? How would I do this? Or is another approach better?

是否可以在没有提交的情况下使用JQuery验证插件?我该怎么办?还是另一种方法更好?

3 个解决方案

#1


42  

Firstly, and most importantly, you must wrap your input elements inside <form></form> tags for the jQuery Validate plugin to operate. However, a submit button is not required.

首先,最重要的是,您必须将输入元素包装在

标记内,以便jQuery Validate插件运行。但是,不需要提交按钮。

Secondly, you can programatically trigger the validity test of any or all elements without a submit button by using the .valid() method.

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

$(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/

#2


1  

You will have to wrap your fields within a form to use the validation plugin and it's a good practice anyway. Also, you can invoke the plugin's validation programmatically and check if the form is valid by doing:

您必须在表单中包装您的字段才能使用验证插件,无论如何这都是一个很好的做法。此外,您可以通过编程方式调用插件的验证,并通过执行以下操作检查表单是否有效:

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

//validate the form
validator.form();

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

For more options, have a look at the docs.

有关更多选项,请查看文档。

#3


0  

I've created a little helper. Just add this line of code and then you can use any button anywhere.

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

$("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>

Explanation: The jquery code listens for all clicks on an element with the attribute 'data-submit-form', in the listener the data-attribute gets extracted and then i trigger the valid method on the matching form.

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

NOTE: if you want to submit the form if the form is valid use this code:

注意:如果您希望在表单有效时提交表单,请使用以下代码:

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

#1


42  

Firstly, and most importantly, you must wrap your input elements inside <form></form> tags for the jQuery Validate plugin to operate. However, a submit button is not required.

首先,最重要的是,您必须将输入元素包装在

标记内,以便jQuery Validate插件运行。但是,不需要提交按钮。

Secondly, you can programatically trigger the validity test of any or all elements without a submit button by using the .valid() method.

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

$(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/

#2


1  

You will have to wrap your fields within a form to use the validation plugin and it's a good practice anyway. Also, you can invoke the plugin's validation programmatically and check if the form is valid by doing:

您必须在表单中包装您的字段才能使用验证插件,无论如何这都是一个很好的做法。此外,您可以通过编程方式调用插件的验证,并通过执行以下操作检查表单是否有效:

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

//validate the form
validator.form();

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

For more options, have a look at the docs.

有关更多选项,请查看文档。

#3


0  

I've created a little helper. Just add this line of code and then you can use any button anywhere.

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

$("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>

Explanation: The jquery code listens for all clicks on an element with the attribute 'data-submit-form', in the listener the data-attribute gets extracted and then i trigger the valid method on the matching form.

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

NOTE: if you want to submit the form if the form is valid use this code:

注意:如果您希望在表单有效时提交表单,请使用以下代码:

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