PDA

View Full Version : ValidatorCallout for Javascript, not Ajax?



dooballoh
Mar 25th, 2007, 11:21 PM
Hello.

How can I find the Javascript similar to Ajax "ValidatorCallout" ?
Example function;
http://ajax.asp.net/ajaxtoolkit/ValidatorCallout/ValidatorCallout.aspx
Please click the "Submit" button without any inputs.

I like to have form validation with highlighted input field if user left blank,
and instead of "arlet" popups, want to use error messages like Ajax I've mentioned above.

Thank you in advance.

iLLin
Mar 25th, 2007, 11:39 PM
Css positioning.

Basically on validate instead of returning an alert, just return false, set focus on the invalid input, turn the background yellow, add a div next to the input field with an offset, put in your error info and zIndex it to the top.

Then add w/e functions you want to the simulated popup such as a close button and w/e else.

This will get you started on what you need to do.
Good Luck :)

dooballoh
Mar 25th, 2007, 11:53 PM
Thank you very much.

Could you post me some example codes please?
What I had now is that only validated and return focus like;

if (!document.addform.title.value)
{
alert('Please specify the title.);
document.addform.title.focus();
return false;
}

What type of CSS and Funcitions should I add to it?

Thank you for help.

iLLin
Mar 26th, 2007, 12:12 AM
I dunno lots of ways you can do it. I would wrap all your inputs in div tags with ID numbers that matched the input name like so:



<div id="first_name_div"><input type="text" name="first_name" /></div>


Then create a child to that div through javascript on fail. Set the width/height of the div, set that background color.. w/e and display: block. Then when you take the focus away from that input display: hidden... etc.

dooballoh
Mar 26th, 2007, 08:37 PM
Thank you for help.

I've java codes to do the work like;

function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;

if (name == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
return false;
} else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
return false;
}
return true;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
}
And CSS with hidden <div> to print out error message.

However, how can I;

1. Highlight the required fields.
2. Let say if user left blank more than 2 required fields,
how can I highlight all required fields and show error message always at the first field.
But, if user skiped first one and clicked second filed,
then how to do remain highlight the first field but this time show the error message on second field and so on until all required fields are filled in?
3. How can I add either 'OK' button or 'X' image to close this error message box created in hidden <div> box?

Thank you in advance.