多个错误DIV的JQuery错误放置

时间:2014-03-01 07:52:41

标签: javascript jquery html validation

在我的HTML表单中,我有五个DIV来放置我的错误。 每个Div都有我想要更改的文本,如果这太难了,我很乐意删除内部文本。

我正在使用JQuery Validator进行检查。

如何指定错误消息的位置?
我发现使用单个div的帖子。请有人告诉我如何在我的代码中实现它。

<div id="errReg1"><p>Your Full Name</p></div>
<div id="errReg2"><p>Your Username</p></div>
<div id="errReg3"><p>Existing Email example@a.com</p></div>
<div id="errReg4"><p>Phone Number UK</p></div>
<div id="errReg5"><p>DOB ex 01/01/2000</p></div>

验证脚本是:

$(function() {

        // validate webmail Register form on keyup and submit
        $("#webmailRegisterForm").validate({
             rules: 
             {  
                webmailFullName:
                {
                    required: true,
                    minlength: 7
                },
                webmailUserName:
                {
                    required: true,
                    minlength: 9,
                    email: true
                },
                webmailExEmail:
                {
                    required: true,
                    minlength: 9,
                    email: true
                },
                webmailPhone:
                {
                    required: true
                    //phone number
                },
                //webmailDOB
                //{
                //}
             },
             //The Error Messages
             messages: 
             {
                webmailFullName:
                {
                    required: "Please provide a full name",
                    minlength: "Name must be at least 7 characters"
                },
                webmailUserName:
                {
                    required: "Please provide a AllColes email",
                    minlength: "AllColes email must be at least 9 characters",
                    email: "Please enter a valid username@allcoles.com email"
                },
                webmailExEmail:
                {
                    required: "Please provide an existing email",
                    minlength: "Existing Email must be at least 9 characters",
                    email: "Please enter a valid email"
                },
                webmailPhone:
                {
                    required: "Please enter a UK Mobile Number",
                },
                //webmailDOB
             },
        errorContainer: "#errReg1, #errReg2",
        errorLabelContainer: "#errReg3", 
        submitHandler: function(form) {
        form.submit();
    }
});

});

谢谢

我认为我取得了进步,但它没有用,请帮我解决我做错的事情?

errorPlacement: function(error, element){ 
                 switch (error.text())
                 {
                 case 0:
                   x="Please provide a full name";
                   $('#errReg1').text(error.text());
                   break;
                 case 1:
                   x="Name must be at least 7 characters";
                   $('#errReg1').text(error.text());
                   break;
                 case 2:
                   x="Please provide a AllColes email";
                   $('#errReg2').text(error.text());
                   break;
                 case 3:
                   x="AllColes email must be at least 9 characters";
                   $('#errReg2').text(error.text());
                   break;
                 case 4:
                   x="Please enter a valid username@allcoles.com email";
                   $('#errReg2').text(error.text());
                   break;
                 }
             },

2 个答案:

答案 0 :(得分:2)

 errorPlacement: function(error, element){ 
             switch (error.text())
             {
                 case "Please provide a full name":
                 case "Name must be at least 7 characters":
                   $('#errReg1').text(error.text());
                   break;
                 case "Please provide a AllColes email":
                 case "AllColes email must be at least 9 characters":
                 case "Please enter a valid username@allcoles.com email":
                   $('#errReg2').text(error.text());
                   break;
                 case "Please provide an existing email":
                 case "Existing Email must be at least 9 characters":
                 case "Please enter a valid email":
                   $('#errReg3').text(error.text());
                   break;
                 case "Please enter a UK Mobile Number":
                   $('#errReg4').text(error.text());
                   break;
                 }

             }
   },

这样可以改变div格式

答案 1 :(得分:1)

你可以像这样改变div的文本

$('<div id or class name>').text ('<new text to replace the old one>');

快乐编码:)