JQuery 多个错误 DIV 的错误放置

Question

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

我正在使用JQuery验证器进行检查。

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

<div id="errReg1"><p>Your Full Name</p></div>
<div id="errReg2"><p>Your Username</p></div>
<div id="errReg3"><p>Existing Email [e-mail]</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 [e-mail] 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 [e-mail] email";
                   $('#errReg2').text(error.text());
                   break;
                 }
             },

Answer 1

 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 [e-mail] 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 格式

Answer 2

好吧，您可以像这样更改div的文本

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

快乐编码:)