Validation with highlight on errors

how can i make some form with validation that will highlight the field(s) that h开发者_开发知识库as invalid inputs or empty?

---

The basic idea is to :

• if the form has been submitted, check for the data
• if it's OK, then use that data
• else, re-display the form

Note : first, you do all this server-side :

• the user submits the form,
• the data is sent to the server
• the server analyses that data
• and re-displays the form, if necessary

Here's a quick portion of code that demonstrates the basic idea :

<?php

// By default, no error
$errors = array(
    'field1' => false, 
);

// And all field have empty values
$values = array(
    'field1' => isset($_GET['field1']) ? $_GET['field1'] : "", 
);


if (isset($_GET['submit'])) {
    // The form has been submitted
    // => Check if all data is here

    if (!isset($_GET['field1']) || empty($_GET['field1'])) {
        $errors['field1'] = true;
    }

}


// If there is no error on any field, then :
//      - save the data
//      - redirect to a page that says "data saved"
// Else, continue, and re-display the form


?>
<style type="text/css">
    .error {
        border: 1px solid red;
    }
</style>
<form action="temp.php" method="get">
    <input type="text" name="field1" <?php if ($errors['field1'] == true) {echo 'class="error"';}?> value="<?php echo htmlspecialchars($values['field1'], ENT_COMPAT, 'UTF-8'); ?>" />
    <input type="submit" name="submit" value="Go !" />
</form>

A couple of notes :

• If your form is meant to create / modify data, you'll use POST instead of GET (but GET is easier to test)
• Of course, you need a bit more HTML than this : I only posted a skeleton ;-)
• And you also need a bit more PHP code, to save the data, redirect, and all.

When this solution works, you can enhance it with a bit of Javascript, to do a first layer of checks, avoiding a round-trip to the server in case of an error.

But you'll still keep the validation on the server : the validation on the client (Javascript) is here to make you site more user-friendly, but JS is not always enabled, and forms can be forged -- so you always need to validate data on the server !

---

This may also help you: http://flowplayer.org/tools/demos/validator/index.html Or if you want to do it in php: (simple)

<?php
if($_GET["name"] == "name"){
    $returnStyle1 = "background-color: green;";
}else{
    $returnStyle1 = "background-color: red;"; 
}
if($_GET["password"] == "123"){
    $returnStyle2 = "background-color: green;";
}else{
    $returnStyle2 = "background-color: red;"; 
}
?>
<form method='get' action='<?php echo $_SERVER["SCRIPT_NAME"]; ?>'>
   <input type='text' name='name' style='<?php echo $returnStyle1; ?>' value='Username (name)' />
   <input type='password' name='password' style='<?php echo $returnStyle2; ?>' value='password (123)' />
   <input type='submit' value='validate' />

</form>

Try to enter "name" & "123" -> Validate

---

You'd have to use ajax for this. Alternatively, you could validate when it is submitted, using javascript. Here is an intro to ajax.

---

You need to use jquery to highlight invalid fields after validation.

Here is the list of some 'inline' validation guides:

http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

And this one is simple:

http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/

---

HTML5 patterns, with possibly a javascript fallback (I gather some browsers already support an :invalid pseudo class, to which you could add a real class to be able to set the invalid state using javascript or while generating the form).

---

Or you can use the old school validation. On the server side, you check the fields and add the error one into an array. Then you reconstruct the html page and you verify every field : if it is in the array, you add a class "error". No ajax, no javascript.

---

you need to use javascritpt. For example you have a textbox for enter the name.

<form name="myform" action="abc.php" method="post" onsubmit="validate();">
<input type="text" name="txt1"><div id = "givepost" style="display:none" align="center">*</div>
<input type="submit" name="submit">
</form>
<script type="text/javascript">
function validate()
{
if(document.myform.txt1.value='')
{
document.myform.txt1.focus();
document.getElementById("givepost").style.display="block";
return false;
}
}

It will show the * if the textbox is empty. You can change way to display the error