Validation - Input fields - at a time

**systech44** · Jul 18th, 2013, 11:02 PM

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.

HTML 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** · Jul 19th, 2013, 01:22 AM

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

Example

**systech44** · Jul 20th, 2013, 12:59 PM

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** · Jul 21st, 2013, 06:02 PM

http://jqueryvalidation.org/

Thread: Validation - Input fields - at a time

Thread Tools

Display

Validation - Input fields - at a time

Re: Validation - Input fields - at a time

Re: Validation - Input fields - at a time

Re: Validation - Input fields - at a time

Posting Permissions