jquery.validate1.9.0前台验证使用

来源：互联网发布：淘宝家装论坛编辑：程序博客网时间：2024/05/21 18:33

一、利用jquery.form插件提交表单方法使用jquery.validate插件

现象：当提交表单时，即使前台未验证通过，也照常提交表单。

解决办法：

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

相关说明：

....................................................................

通过监听form的submit事件，对form进行ajax提交。示例完整代码如下：

$(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('<li>' + v + '</li>');                $('.e_' + k).html(v);            });        }    }}

二、控制错误信息位置的方法

现象一：

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

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

现象二：

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

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

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

转载：http://www.verydemo.com/demo_c107_i1248.html

0 0