How to mimic rack validation using javascript / html / css
For the last few years I have been focusing on back-end development, so I lack javascript and css skills. I am volunteering as a webmaster for a site and would like to submit a validation form (currently not available).
My problem: Basically I have one form with multiple fields for name, email and phone number. When the form is submitted, I validate all fields. If the data is not valid, I would like to change the color of the field label to red (similar to validating strings). What's the easiest way to do this?
Edit: I also have PHP authentication. I want to make it nicer and more user-friendly in the interface. The PHP check is on a different server. If validation fails in the background, it displays a message and the user is forced to use the Back button. I am hoping to go back to the original page and display invalid fields.
source to share
when you create a server-side page, mark any fields with errors in them:
<input type="text" name="phone_number" class="error_field">
555-121
</input>
Then the CSS page has an entry like:
input.error_field { color: #FFF; bgcolor: #C00; }
(The "class selector" period means it applies to all inputs with the "error_field" class attribute. If you are already using classes for your input tags, you can give elements multiple classes, just use spaces to separate.)
If you want to know what code Struts generates for a color page, one easy way is to use Firebug for Firefox.
source to share
Assuming the label is at the same level of the DOM hierarchy as the input, and that it is next to the input in the markup, you can do something like this.
First of all, some HTML example:
<html>
<body>
<form onsubmit="return validation()" action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" value="" id="name" />
<label for="email">Email:</label>
<input type="text" value="" id="email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
As you can see, all inputs are preceded by a label with the correct attribute.
Now for the Javascript to go head-to-head:
<script type="text/javascript">
function validation() {
//So we have a validation function.
//Let first fetch the inputs.
name = document.getElementById("name");
email = document.getElementById("email");
//The variable error will increment if there is a validation error.
//This way, the form will not submit if an error is found.
error = 0;
//Now for validation.
if(name.value.length < 6) {
//We've found an error, so increment the variable
error++;
//Now find the corresponding label.
nameLabel = name.previousSibling;
//If we found the label, add an error class to it.
if(nameLabel && nameLabel.for = name.id) {
nameLabel.className = "error";
}
}
///////////////////
//Do the same with the email...
///////////////////
//Now, if there are no errors, let the form submit.
//If there are errors, prevent it from doing so.
return (error == 0) ? true : false;
}
</script>
Now just add CSS:
<style type="text/css">
.error {
background-color: red;
}
</style>
Edit - I guess you didn't want a solution like this, but in case you want to test it before going to the server, you are here. :)
source to share
Authorization checks are performed on the server side; JavaScript validation is done on the client. The distinction is important because server side validation still works even if your client disables JavaScript in the browser (and ~ 10% of people reportedly do).
Better to have both if you can.
source to share
You can put this together as others have suggested. But I seem to remember that Struts has its own JavaScript validation. It can be configured to generate JavaScript functions that perform the same checks that are performed on the server side. Check out the documentation - it might be a quick way to get started, although it might not be as customizable as you want.
source to share
I have definitely not used struts before, but I do a lot of form validation with and without javascript.
In my opinion, you should always have both JavaScript and server side validation, so it should work for everyone.
On the server side, you should be doing something like glaziusf.myopenid.com , just add a class to the element that shows it in red.
In javascript (and ajax), just add the same class to the element you are using server side, but dynamically.
I would recommend that you learn a JavaScript framework like JQuery or Prototype. JQuery helps you get values from filtered elements, modify their CSS, add visuals, and more. Very easy.
I don't really understand the PHP logic of your site, but you can put the validation on the same page if the action submits to itself, although I don't know if this is good practice. For example, you put from top to top:
if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...
To redirect from PHP, you just say:
header("Location: THE_PAGE.php");
Although you shouldn't have output anything before. You could probably pass a parameter back to your page (ie: THE_PAGE.php? ValMsg = 1) to tell it to show validation messages or something like that.
source to share