1

i have a form with Jquery .validation().

Form:

<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>

I would like to print errors like this:

enter image description here

Is it possible?

Thanks in advance :)

1
  • @ManseUK sample code please, or just an idea how to do it. :)) Commented Apr 25, 2012 at 10:05

3 Answers 3

1

Demo Here

HTML

<form name="test">
<table cellspacing="1" cellpadding="1">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/>
    <span class="error_span">Enter name</span>
    </td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/>
        <span class="error_span">Enter last name</span>
    </td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/>
        <span class="error_span">Enter address</span>
    </td>
</tr>
</table>
<input type='button' id='submit' name='enter' value='submit'/>
</form>

jQuery

$(document).ready(function(){
    $("#submit").click(function(){
        $('input').each(function(index) {
                   if($(this).val()=="") {
                       $(this).addClass("has_error");
                       $(this).siblings(".error_span").show();
                   }else{
                       $(this).removeClass("has_error");
                       $(this).siblings(".error_span").hide();
                   }
          });
    });
 });

CSS

.error_span{
color:red;
    display:none;
}

.has_error{
 border:1px solid red;
}

Demo Here

You can use onsubmit attribute of your form to execute the javascript and stop the form from submitting if there is validation error

Sign up to request clarification or add additional context in comments.

Comments

0

You can do in Two ways..

1)

<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td></td>
<td>Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>

or

2)

<form....>
    <table cellspacing="0" cellpadding="0">
    <tr>
    <td>Name: </td>
    <td><input type='text' name='Name'/></td>
    </tr>
    <tr>
    <td>Last Name: </td>
    <td><input type='text' name='LastName'/> <br />Name Is Required</td>
    </tr>
    <tr>
    <td>Address: </td>
    <td><input type='text' name='Address'/></td>
    </tr>
    </table>
    <input type='submit' name='enter' value='submit'/>
    </form>

1 Comment

This looks cool, actually i know that, but do you have any ideas how to achieve that jquery validate actually post the error labels like that?
0

You have to use custom validation code for doing like that. Check this link. http://docs.jquery.com/Plugins/Validation/Validator/addMethod

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.