Introduction to the use of jquery.validate1.9.0 front-end validation_jquery

1. Use the jquery.form plug-in to submit the form. Use the jquery.validate plug-in

Phenomenon: When submitting a form, even if the frontend does not pass verification, the form is submitted as usual.

Solution:

Copy the code The code is as follows:

$('#myForm').submit(function(){
if (!$(this).valid()) return false;//Add this sentence OK
$('.error'). html('');
$("#go").prop("disabled",true);
$(this).ajaxSubmit({
type:"POST",
/ /beforeSubmit: showRequest,
dataType:'json',
success: showResponse
});
return false;
});

Related instructions:

Customized submission method (ajax submission)
If you use ajax method to submit, please use the following two methods combined with the verification framework
1) Use the submitHandler attribute to configure ajax submission. submithandler: When the form is fully verified After the verification is passed, the configured code will be called back. Here, the ajax submission is called after the verification is passed.
2) Use the valid method to listen to the submit event of the form, and then submit it when $('#form').valid() returns true.

Submit the form via ajax by listening to the submit event of the form. The complete code of the example is as follows:

Copy the code The code is as follows:

$(document).ready(function(){

    $('#myForm').submit(function(){
        if (!$(this).valid()) return false;
        $('.error').html('');
        $("#go").prop("disabled",true);
        $(this).ajaxSubmit({
            type:"POST",
            //beforeSubmit: showRequest,
            dataType:'json',
            success: showResponse
        });
        return false;
    });

    var validator = $("#myForm").validate({
        rules: {
            username: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            username: "请输入姓名",
            email: {
                required: "请输入Email地址",
                email: "请输入正确的email地址"
            }
        }
    });

});

function showResponse(jsonData,statusText)
{
    if(statusText=='success')
    {
        $("#go").prop("disabled",false);
        if (jsonData.status == 1)
        {
            $("#return").html(jsonData.message);
        }
        else
        {
            $.each(jsonData.errors, function(k,v){
                //$('#output').find('ul').append('

' v '

');
                $('.e_' k).html(v);
            });
        }
    }
}

二、控制错误信息位置的方法
现象一：

我在注册表单新加了一个验证码。验证结果错误时，这个错误信息跑到验证码前面去了。如下图所示：

目的：让错误信息在验证码后面

现象二：

上图中的红色提示内容，我想移到 (* 必填) 的后面。

上面两个现象，可通过jquery.validate自带的控制错误信息位置的方法——'errorPlacement'，使用也很方便：

复制代码 代码如下:

errorPlacement: function(error, element)
{
    error.appendTo(element.parent());
}