ansaurus

Question

How to mimic struts validation using javascript/html/css.

Answer 1

A:

Struts validation is happening on the server side; JavaScript validation runs on the client. The distinction is important, because server-side validation still works even if your client turns off JavaScript in the browser (and ~10% of people reportedly do).

Best to have both if you can.

duffymo 2008-12-31 16:54:24

Thanks for the comment. The back-end validation is already handled but I would like to make the front-end more user friendly. I've edited my question.

Lisa 2008-12-31 16:56:54

Answer 2

+1 A:

when you're building the page server-side, mark all the fields with errors in them:

<input type="text" name="phone_number" class="error_field">
   555-121
</input>

Then in the page's CSS include an entry like:

input.error_field { color: #FFF; bgcolor: #C00; }

(The period's a "class selector", means it applies to all inputs with the class attribute "error_field". If you're already using classes for your input tags you can give elements multiple classes, just use spaces to separate.)

If you want to know what kind of code Struts is producing to color the page, one easy way is to use the Firebug extension for Firefox.

Glazius 2008-12-31 17:27:17

Answer 3

+1 A:

Assuming that the label is in the same level of the DOM hierarchy as the input and that it is right next to the input in the markup, you can do something like this.

First of all, some example HTML:

<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 of the inputs are preceded by a label with the correct for attribute.

Now for the Javascript, which would go in the head:

<script type="text/javascript">
    function validation() {
     //So we have a validation function.
     //Let's 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 some CSS:

<style type="text/css">
.error {
  background-color: red;
}
</style>

Edit -- I guess you didn't want this sort of solution, but in case you want it to validate before going to the server, here you go. :)

Salty 2008-12-31 17:34:55

Answer 4

A:

You can put this together yourself, as others have suggested. But I seem to remember that Struts has its own JavaScript validation. It can be configured to generate JavaScript functions, which perform the same checks that are done on the server side. Check the documentation -- this may be a fast way to get started, although it may not be as customizable as you want.

JW 2008-12-31 17:43:49

Answer 5

A:

I definitely haven't 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.

Server-side, you should do something like glaziusf.myopenid.com mentioned, just add a class to the element which shows it in red.

In javascript (and ajax), just add the same class to the element that you'd use server-side, but dynamically.

2008-12-31 18:18:55

Answer 6

A:

I'd recommend you learn a JavaScript framework like JQuery or Prototype. JQuery helps you to obtain values out of filtered-elements, modify their CSS, add visual effects, etc. really easily.

I don't really understand the PHP logic of your site, but you can put a validation in the same page if the action submits to itself, although I don't know if it's a good practice. For example, you put the following at the top:

if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...

To redirect with PHP you just say:

header("Location: THE_PAGE.php");

Although you shouldn't have outputed anything before that. You could probably pass a parameter back to your page (i.e.: THE_PAGE.php?valMsg=1) to tell it to show validation messages, or something of the sort.

xgMz 2009-01-13 17:47:00

ansaurus

tags:

views:

answers:

How to mimic struts validation using javascript/html/css.

related questions