# Other Languages > jQuery >  Validation - Input fields - at a time

## systech44

I wish to put validation on different input fields. Here are several situations take place that does not fulfill my requirements.

1. 1st time click - all the error messages are showing (ok).
2. 2nd time click - after enter value of the first input field (name) - no error message is showing - refresh the browser Refresh button (not ok, why need to refresh the browser).
3. 3rd time click - error message for the rests of the three blank input fields are showing (not ok, this should not be needed).

What I want is - not to refresh the Refresh button of the browser, on the 2nd click of the button rests of the three error message will be shown.

Here is my code.



```
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<title>Records</title>
<script type="text/javascript">
$(document).ready(function(){
    $("#button").click(function(){
        if($.trim($("#name").val()) == ""){
            $("#msg_name").text("Enter Name").fadeOut(3000);
        }
        if($.trim($("#address").val()) == ""){
            $("#msg_address").text("Enter Address").fadeOut(3000);
        }
        if($.trim($("#mobile").val()) == ""){
            $("#msg_mobile").text("Enter Mobile").fadeOut(3000);
        }
        if($.trim($("#email").val()) == ""){
            $("#msg_email").text("Enter Email").fadeOut(3000);
        }     
    });   
});
</script>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="2" width="50%">
    <tr>
        <td align="left" width="20%">Name</td>
        <td align="left" width="80%">
            <input type="text" id="name" name="name" />
            <div id="msg_name" class="msg_blank"></div>
        </td>
    </tr>
    <tr>
        <td align="left" width="20%">Address</td>
        <td align="left" width="80%">
            <input type="text" id="address" name="address" />
            <div id="msg_address" class="msg_blank"></div>
        </td>
    </tr>   
    <tr>
        <td align="left" width="20%">Mobile</td>
        <td align="left" width="80%">
            <input type="text" id="mobile" name="mobile" />
            <div id="msg_mobile" class="msg_blank"></div>
        </td>
    </tr>
    <tr>
        <td align="left" width="20%">Email</td>
        <td align="left" width="80%">
            <input type="text" id="email" name="email" />
            <div id="msg_email" class="msg_blank"></div>
        </td>
    </tr>
    <tr>
        <td align="left" width="20%">&nbsp;</td>
        <td align="left" width="80%">
            <input type="button" id="button" name="button" value="Submit" />
        </td>
    </tr>
</table>
<div id="msg"></div>
</body>
</html>
```

Please help me to resolve the situation as per my need.

----------


## tr333

It's much easier to just do form validation with HTML5 attributes on the input elements.

Example

----------


## systech44

Hello tr333, thank you for the response. I know that its possible via HTML5. But what am I need to do if I wish to do the same using jQuery itself. Please suggest if possible.

----------


## tr333

http://jqueryvalidation.org/

----------

