Validation check mark right beside form input field by jquery

284
November 21, 2016, at 4:56 PM

There is a form on my page where I want to display a check mark(tick) right beside all input fields. I've already tried a couple of ways to do this but unable to achieve what I want.Below is my code....

$(document).ready(function() { 
 
  $("#myForm").on('submit', function(event) { 
    event.preventDefault(); 
 
    var firstName = $('#first').val(); 
    var lastName = $('#last').val(); 
    var email = $('#email').val(); 
    var pass = $('#password').val(); 
 
    if (firstName == "") { 
      $('#first-name-error').text("Please enter your first name"); 
    } else if (firstName.length > 0) { 
      $(this).next().show(); 
    } 
    if (lastName == "") { 
      $('#last-name-error').text("Please enter your last name"); 
    } 
    if (email == "") { 
      $('#email-error').text("Please enter your email address"); 
    } else if (email == "aisha_salman3@outlook.com") { 
      $('#email-error').text("This email is already taken!"); 
    } 
    if (pass == "") { 
      $('#password-error').text("Please enter your password"); 
    } else if (pass.length < 8) { 
      $('#password-error').text("Short passwords are too easy to guess.Try one with at least 8 characters"); 
    } 
  }); 
 
});
.tick { 
  background: url(images/done-tick.png) no-repeat; 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  margin: 5px 20px; 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<main> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-lg-6 col-lg-offset-3"> 
        <form id="myForm" action="" method=""> 
          <fieldset> 
            <legend>Create Account</legend> 
            <div class="form-group"> 
              <label for="first">First Name</label> 
              <p id="first-name-error"></p> 
              <input type="text" class="form-control" id="first" maxlength="10" placeholder="your first name ..." autofocus /> 
              <span class="tick"></span> 
            </div> 
            <div class="form-group"> 
              <label for="last">Last Name</label> 
              <p id="last-name-error"></p> 
              <input type="text" class="form-control" id="last" maxlength="10" placeholder="your last name ..." /> 
              <span class="tick"></span> 
            </div> 
            <div class="form-group"> 
              <label for="email">Email</label> 
              <p id="email-error"></p> 
              <input type="email" class="form-control" id="email" placeholder="your email ..." /> 
              <span class="tick"></span> 
            </div> 
            <div class="form-group"> 
              <label for="password">Password</label> 
              <p id="password-error"></p> 
              <input type="password" class="form-control" id="password" placeholder="your password ..." /> 
              <span class="tick"></span> 
            </div> 
          </fieldset> 
          <input class="btn" type="submit" value="Sign Up " /> 
        </form> 
      </div> 
    </div> 
  </div> 
</main>

Please guide me.Thank you!

Answer 1

You seem to be referencing this, which is the form element, not the first name. So when you get next, you are not getting an element. Your code should look like:

if (firstName == "") {
      $('#first-name-error').text("Please enter your first name");
} else if (firstName.length > 0) {
      $('#first').next().show();
}

Here is a fiddle to show how it works. https://jsfiddle.net/ukg82xqr/2/

READ ALSO
Qooxdoo table tooltips performance

Qooxdoo table tooltips performance

I am using qooxdoo 5. 0.

323
Print an ajax response on a new window

Print an ajax response on a new window

I have the following function which capture a click event of an anchor. Trigger a synchronous ajax function to get the response.

260
How to create an element with input value as content, and add specific class to it with a button?

How to create an element with input value as content, and add specific class to it with a button?

I am trying to create list item with the value of an input and add some color to it with a button, anyone have an idea?[nnn]Thanks,.

226