Reputation: 117
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
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
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