CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mike Phils
Mike Phils

Reputation: 3505

Form validation using Jquery focus and blur method

I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.

Can any please help me?

HTML & JS CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
      Test
    </title>
    <style type="text/css">
      .showerror{
        display:block;
      }
      .noshowerror{
        display:none;
      }
      .remerr{
        display:none;
      }

      .redborder{
        border:#F00 solid 1px;
        background-color:yellow;
      }
      .greenborder  {
        border:#0F3 solid 1px;
        background-color:#6F6;
      }
    </style>
  </head>

  <body>
    <div style="width:450px">
      <div style="float:left">
        <table>
          <form id="eg">
            <tr>
              <td>
                <label>
                  Name:
                </label>

                <td>
                  <input type="text" id="name" />
              </tr>
            <tr>
              <td>
                <label>
                  Surname:
                </label>

                <td>
                  <input type="text" id="surname" />
              </tr>
            <tr>
              <td>
                <label>
                  Email:
                </label>

                <td>
                  <input type="text" id="email" />
              </tr>
            <tr>
              <td>
                <label>
                  Number:
                </label>

                <td>
                  <input type="text" id="number" />
              </tr>
            <tr>
              <td>
                <label>
                  Age:
                </label>

                <td>
                  <input type="text" id="age" />
              </tr>
            <tr>
              <td>
                <label>
                  Comment:
                </label>

                <td>
                  <input type="text" id="comment" />
              </tr>
            <tr>
              <td>
                <label>
                  Password
                </label>

                <td>
                  <input type="password" id="pwd" />
              </tr>
            <tr>
              <td>
                <label>
                  Confirm Password
                </label>

                <td>
                  <input type="password" id="cnfmpwd" />
              </tr>
            <tr>
              <td colspan="2">
                <input type="submit" value="test" />
              </td>
            </tr>

          </form>
        </table>
      </div>
      <div style="float:right">
        <p id="fail" class="noshowerror" >
          Please enter name
        </p>
        <p id="nameerr2" class="remerr">
          Name is correct
        </p>
      </div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
    </script>
    <script type="text/javascript">

    $(document).ready(function () {
        if ($("#name").val('')) {

            $("#name").val('Name Please');
        }
        $('#name').focus(function () {
            if ($('#name').val() == 'Name Please') {
                $('#name').val("");
            }

        });
        $('#name').blur(function () {
            var nameRegex = /^[A-Za-z]+$/;
            var fname = document.getElementById("name").value;

            if (!nameRegex.test(fname)) {
                $("#name").addClass('redborder');

            } else if (fname == " ") {
                $("#name").addClass('redborder');
            } else {

                $("#name").addClass('greenborder');
                return false;
            }   
        });
    });

    </script>


  </body>
</html>

Thanks in advance

Upvotes: 1

Views: 23949

Answers (3)

dreamweiver
dreamweiver

Reputation: 6002

I have refined our code and its working as you intended, there were several mistake in defining the elements within table,may be you can have a look at my code on how to define it .

LIVE DEMO

HTML CODE:

<body>
 <div style="width:450px">
<div style="float:left">
    <form id="eg" action="/">
        <table>
            <tr>
                <td>
                    <label>Name:</label>
                </td>
                <td>
                    <input type="text" id="name" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Surname:</label>
                </td>
                <td>
                    <input type="text" id="surname" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Email:</label>
                </td>
                <td>
                    <input type="text" id="email" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Number:</label>
                </td>
                <td>
                    <input type="text" id="number" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Age:</label>
                </td>
                <td>
                    <input type="text" id="age" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Comment:</label>
                </td>
                <td>
                    <input type="text" id="comment" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Password</label>
                </td>
                <td>
                    <input type="password" id="pwd" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Confirm Password</label>
                </td>
                <td>
                    <input type="password" id="cnfmpwd" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="test" onclick="return false;" />
                </td>
            </tr>
        </table>
    </form>
</div>
</div>
<div style="float:right">
   <p id="fail" class="noshowerror">Please enter name</p>
   <p id="nameerr2" class="remerr">Name is correct</p>
 </div>
</body>

JS CODE:

$(document).ready(function () {
if ($("#name").val('')) {
    $("#name").val('Name Please');
}
$('#name').focus(function () {
    if ($('#name').val() == 'Name Please') {
        $('#name').val("");
    }

});
$('#name').blur(function () {
    var nameRegex = /^[A-Za-z]+$/;
    // var fname = document.getElementById("name").value;
    var fname = $("#name").val();
    alert(nameRegex.test(fname));

    if (!(nameRegex.test(fname))) {
        $("#name").removeClass('greenborder').addClass('redborder');

    } else if (fname == " ") {
        $("#name").removeClass('greenborder').addClass('redborder');
    } else {
        $("#name").removeClass('redborder').addClass('greenborder');
        return false;
    }


});

 });

When your using jQuery lib, make sure you make the most of it, i have seen that there was raw javascript syntax in your code. jQuery was designed make things easier by reducing the syntax.

Edited: I have refined the code, so that the code work on any number of times.

Happy Coding :)

Upvotes: 1

isThisLove
isThisLove

Reputation: 269

   if ($("#name").val('')) {

            $("#name").val('Name Please');
        }
   $('#name').focus(function () {
                if ($('#name').val() == 'Name Please') {
                    $('#name').val("");
                }

can be changed by : 

<input type="text" name="name" id="name" placeholder="Name Please" />

http://www.w3schools.com/tags/att_input_placeholder.asp

For your issue : 

var fname = $("#name").val(); //jQuery style

$('#name').on("blur", function(){

    // we want element #name a range of letters

    var regexp = /^([A-Za-z])+$/;

    // if the element #name contains a range of letters defined in var regexp

    if (!nameRegex.test(fname)) {

        $("#name").addClass('redborder');

        return true;

    }

    // if the element #name is empty, does not contain string   
        if ( $("name").length === 0 ) {

        $("#name").addClass('redborder');

        return true;

    }

    // if we are still here, means that the element #name is valid

    $("#name").addClass('greenborder');

        return false;

} 

// on focus name input

$("#name").on("focus", function() {

    // if the input get the redborder class, then reset

    if ( fname.hasClass("redborder") ){

        fname.removeClass("redborder");

    }
}

Upvotes: 0

isThisLove
isThisLove

Reputation: 269

$('#name').blur(function(){

trigger the blur event.

To listen for the blur event, made by the user : 

$('#name').on("blur", function(){

Upvotes: 0

Related Questions