Name validation without using jQuery plugin

Question

I'm looking to validate First & Last name in jQuery. I don't want to use jQuery validation plugin due to project requirements.

This is what I intend to achieve :

If both the input boxes are empty the error message should indicate the 2nd input box being empty (eg... Yahoo Sign-up Page)

If one of the input box is filled, the empty box should be highlighted in red along with the error message.

Where do I place other validation code like the one that denies special characters and numbers in each box ?

As soon as validation passes, both the box should turn green.

HTML code:

jQuery Code:

$(document).ready(function() {
      var fname = $('#cust_fname');
      var lname = $('#cust_lname');
      var error_msg = $('#name_error_msg'); 
      var regex  = /^[A-Za-z\s`~!@#$%^&*()+={}|;:'",.<>/?\-]+$/ ;


    $("input").blur(function(){       

        if( $(fname).val().length === 0) {  

              $(error_msg).text("First name can't be empty");
              $(this).css("border", "1px solid red");
              return false}


          else if($(lname).val().length === 0) {
               $(error_msg).text("Last name can't be empty");             
                  $(this).css("border", "1px solid red");
                  return false; }

        $(error_msg).text("");
        $(this).css("border", "1px solid green");  

          });

    });

CSS code:

fieldset {
    width: 30%;
    border: solid 1px black;}

legend {
    color: black;
    font-style: italic;
    font-size: 15px;
    border: solid 1px black;
    margin: 25px; }

.first_container {
    padding: 3px;
    width: 150px;
    font-style: italic;
    font-weight: bold;
    color: #a77;}

#nameBlock {
    display: inline-block;}

#cust_fname {
    margin: 3px;
    padding: 5px;
    width: 170px;}

#cust_lname {
    margin: 5px;
    padding: 5px;
    width: 170px;}

#name_error_msg{
 margin: 5px;
 color: red; }

Current behavior of the code:

When the tab bypasses both the empty input box, the error message is displayed as "First name can't be empty"

whereas it should be as "Last name can't be empty"
Let's say, if we move by filling the 1st box to 2nd box, the 1st box color still remains red.

By convention, it should have turned "green" as we move the focus away. (considering validation is passed)
Moreover, as we input something in 2nd input box and move further, this time only the 2nd box turns "green". (considering validation is passed)

whereas the 1st box color is still "red"
Now, to turn the 1st box "green", we have to travel vertically up from 2>1>2 (denotes index of box)

Rizky Fakkel · Accepted Answer

Not wanting or being able to use a plugin like jQuery Validation can give you a bunch of extra work. It can be frustrating, but treat it like disecting an animal, you can now see what the functions you use actually do.

Now the first thing we can see is when we look at your jQuery function:

$("input").blur(function() {

  if ($(fname).val().length === 0) {

    $(error_msg).text("First name can't be empty");
    $(this).css("border", "1px solid red");
    return false;
  } else if ($(lname).val().length === 0) {
    $(error_msg).text("Last name can't be empty");
    $(this).css("border", "1px solid red");
    return false;
  }
  // Add if statement for 
  $(error_msg).text("");
  $(this).css("border", "1px solid green");

});

Let's put your blur() code into words so you will understand it too.

If the First Name input element is empty, show an error message, and make the border of the current element bright red and exit the if statement.

If the First Name element is not empty, but the Last Name element IS empty, show an error message and make the border of the current element bright red.

If no elements are empty, make the border of the current element green.

So this helps understand what your code is doing wrong:

If the First Name input element or both elements is/are empty, "First name can't be empty" is always shown because of the return false; which exits your if statement.
When everything is filled in, only the element you are currently filling in will change its border when the blur() event is called because you use this in $(this).css("border", "1px solid green"); meaning only the current input element that called the blur event will get a green border. When you click the input box of the First Name, and then click outside of it, the blur event is now called for that input element, and it will get the green border too. Now I assume this is not what you want.

So, what does your code have to do?

The page should display the error message for the last field that you focused out of.

Empty input elements should get a red border after the blur() event is called

Some fields should deny special characters and numbers

Both boxes have to turn green if validation succeeds.

$(document).ready(function() {
  var fname = $('#cust_fname');
  var lname = $('#cust_lname');
  var error_msg = $('#name_error_msg');
  var regex = /^[A-Za-z\s`~!@#$%^&*()+={}|;:'",.<>/?\-]+$/;

  var checkForm = function() {

    $('#nameBlock input').each(function() {
      if ($(this).attr('name') === 'fname' && $(this).val().length === 0) {
        $(error_msg).text("First name can't be empty");
        $(this).css('border', '1px solid red');
      } else if ($(this).attr('name') === 'lname' && $(this).val().length === 0) {
        $(error_msg).text("Last name can't be empty");
        $(this).css('border', '1px solid red');
      } else {
        $(this).css('border', '1px solid green');
      }
    });
  };

  $('#nameBlock input').blur(function() {
    if ($(this).val().length === 0) {
      switch ($(this).attr('name')) {
        case 'fname':
          $(error_msg).text("First name can't be empty");
          $(this).css('border', '1px solid red');
          break;
        case 'lname':
          $(error_msg).text("Last name can't be empty");
          $(this).css('border', '1px solid red');
          break;
        default:
          $(error_msg).text("");
          break;
      }
    } else {
      $(error_msg).text("");
      $(this).css('border', '1px solid green');
      checkForm();
    }

  });

});

fieldset {
  width: 30%;
  border: solid 1px black;
}
legend {
  color: black;
  font-style: italic;
  font-size: 15px;
  border: solid 1px black;
  margin: 25px;
}
.first_container {
  padding: 3px;
  width: 150px;
  font-style: italic;
  font-weight: bold;
  color: #a77;
}
#nameBlock {
  display: inline-block;
}
#cust_fname {
  margin: 3px;
  padding: 5px;
  width: 170px;
}
#cust_lname {
  margin: 3px;
  padding: 5px;
  width: 170px;
}
#name_error_msg {
  margin: 5px;
  color: red;
}



  
    
      Login Page
      Name

So, instead of your if statement, I have used switch cases. I have looked at Yahoo's pages and am simulating this behavior of their name block in my code. I have also added a checkForm function which checks the whole block of inputs to see if any inputs are not valid. Now my code does the following:

Check current field, if empty, give it a red border and display an error based on the field's name attribute.

If it's not empty, set the border as green.

Also, execute the checkForm function, which goes by all inputs and checks them again, just in case a previous field is empty.

Display an error if an empty field is found by checkForm.

Feel free to comment if you have any questions.

Name validation without using jQuery plugin

Answers (1)

Related Questions