Smokey
Smokey

Reputation: 117

JQuery Error Placement for multiple errors DIV's

In my HTML form I have five DIV's to place my errors. Each Div already has text in which I would like to change, if this is too difficult I would be happy to remove the inner text.

I am using JQuery Validator for my checking.

How can I specify the positioning of my error messages?
I have found posts on using a single div. Please can someone show me how to implement it into my code.

<div id="errReg1"><p>Your Full Name</p></div>
<div id="errReg2"><p>Your Username</p></div>
<div id="errReg3"><p>Existing Email [email protected]</p></div>
<div id="errReg4"><p>Phone Number UK</p></div>
<div id="errReg5"><p>DOB ex 01/01/2000</p></div>

The Validate script is:

$(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 [email protected] 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();
    }
});

});

Thank you

I have made progress I think but it's not working, please help me with what I'm doing wrong?

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 [email protected] email";
                   $('#errReg2').text(error.text());
                   break;
                 }
             },

Upvotes: 0

Views: 284

Answers (2)

Smokey
Smokey

Reputation: 117

 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 [email protected] 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;
                 }

             }
   },

This worked and changes the div format

Upvotes: 2

dreamweiver
dreamweiver

Reputation: 6002

Well you can change the text of the div like this

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

Happy Coding :)

Upvotes: 1

Related Questions