jQuery Text Input Real Time Validation clear error when input empty [duplicate]

Question

I took some code from online to make validation for the first name. It works however I would like to make some adjustments. I would like the error message to disappear when the field is empty. Also I would like to add margin to text as it's uneven with the next field but can't seem to make it work.

Here's the markup with the Javascript. This uses bootstrap and another styling sheet which are included below.

$(document).ready(function () {
  var $regexname = /^([a-zA-Z]{2,16})$/;
  $('.name').on('keypress keydown keyup', function () {
    if (!$(this).val().match($regexname)) {
      // there is a mismatch, hence show the error message
      $('.emsg').removeClass('hidden');
    } else {
      // else, do not display message
      $('.emsg').addClass('hidden');
    }
  });
});

.signup2container-stage1 {
  width: 88%;
  margin: auto;
}

#signupsectioncontainer-stage2 {
  float: left;
  width: 45%;
  height: 2000px;
  background-color: orange;
  margin-top: 20px;
}

#signupsectioncontainer-stage3 {
  width: 80%;
  height: 90%;
  background-color: #ffffff;
  margin: auto;
}

#signup2validationinputs input {
  width: 100%;
  height: 45px;
  margin: 10px 0px 10px 0px;
}

.signuptextinputsstyle1 {
  outline-width: 0;
  background-color: #e3e5e8;
  border: none;
  padding: 10px 10px 10px 10px;
  float: left;
  display: block;
}

#signup2submitbutton {
  width: 100%;
  margin-top: 10px;
  padding: 20px 10px 20px 10px;
  border: none;
  outline-width: 0;
  color: #ffffff;
  background-color: #4caf50;
}

#signup2submitbutton #signup2submitbutton:hover {
  background-color: #48a44d;
}

.emsg {
  color: red;
}

.hidden {
  visibility: hidden;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clear">
</div>
<div class="signup2container-stage1">
  <div id="signupsectioncontainer-stage2">
    <h1 id="signup2title">Sign Up</h1>
    <div id="signupsectioncontainer-stage3">
      <div id="signup2validationinputs">
        <input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
        <p>
          <span id="validname" class="emsg hidden">Please Enter a Valid Name</span>
        </p>
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
        <input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
        <input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
        <button id="signup2submitbutton">SIGN UP</button>
      </div>
    </div>
  </div>
</div>

Thanks in advance for the help and also apologies for the messy code.

ThS · Accepted Answer · 2018-09-08 11:44:20Z

0

You should check for the first name input's length if it's 0 then hide the error message, otherwise show it if the input's value doesn't match the regular expression. You should use jQuery's input event instead of keypress, keyup and keydown simultaneously.

By using the BootStrap alert classes you can achieve your desired design gaol, by changing the message span tag to a p tag and give it a class of class="alert alert-danger" and remove the emsg class and give that p tag an id="emsg" for example to reference it later by JavaScript, and also remove the float rule on the first name input tag.

Here's a runnable snippet to illustrate all what being said.

$(document).ready(function () {
  var $regexname = /^([a-zA-Z]{2,16})$/,
      msg = $('#emsg'),
      name = $('.name');
  name.on('input', function () {
    var val = $(this).val();
    if(val.length === 0) {
      msg.addClass('hidden');
    } else if (!val.match($regexname)) {
      // there is a mismatch, hence show the error message
      msg.removeClass('hidden');
    } else {
      // else, do not display message
      msg.addClass('hidden');
    }
  });
});

.signup2container-stage1 {
  width: 88%;
  margin: auto;
}

#signupsectioncontainer-stage2 {
  /* just for the demo purpose I removed the next two lines
  float: left;
  width: 45%; */
  height: 2000px;
  background-color: orange;
  margin-top: 20px;
}

#signupsectioncontainer-stage3 {
  width: 80%;
  height: 90%;
  background-color: #ffffff;
  margin: auto;
}

#signup2validationinputs input {
  width: 100%;
  height: 45px;
  margin: 10px 0px 10px 0px;
}

.signuptextinputsstyle1 {
  outline-width: 0;
  background-color: #e3e5e8;
  border: none;
  padding: 10px 10px 10px 10px;
  display: block;
}

#signup2submitbutton {
  width: 100%;
  margin-top: 10px;
  padding: 20px 10px 20px 10px;
  border: none;
  outline-width: 0;
  color: #ffffff;
  background-color: #4caf50;
}

#signup2submitbutton #signup2submitbutton:hover {
  background-color: #48a44d;
}

.emsg {
  color: red;
}

.hidden {
  display: none;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clear"></div>
<div class="signup2container-stage1">
  <div id="signupsectioncontainer-stage2">
    <h1 id="signup2title">Sign Up</h1>
    <div id="signupsectioncontainer-stage3">
      <div id="signup2validationinputs">
        <input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
        <p id="emsg" class="alert alert-danger hidden">Please Enter a Valid Name</p>
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
        <input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
        <input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
        <button id="signup2submitbutton">SIGN UP</button>
      </div>
    </div>
  </div>
</div>

Ps: instead of using a class that has visibility: hidden; rule to hide/show the error message, I suggest you drop that class and give the p tag that holds the message a display: none; property then with jQuery you can animate it or hide/show it without animation, all that without using any classes. i.e: msg.slideDown(400);

EDIT:

The gap that you used to see is due to the fact that the visibility: hidden; rule doesn't remove the element from the page(by 'remove' I mean visually removing, the element is here and can reappear). So, in the .hidden class I changed the visibility: hidden; rule to display: none;.

Hope I pushed you further.

edited Sep 8, 2018 at 11:44

answered Sep 6, 2018 at 23:46

ThS

4,7932 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

Jason Singh Over a year ago

Thanks this worked great with a little adjusting :)

ThS Over a year ago

@JasonSingh glad that helps ! if my answer was really helpful, kindly, mark it as accepted.

Jason Singh Over a year ago

This worked, however my styling is different on the page which makes the background color of the error message appear above the input, I tried to add a last name and the background color goes to the top of the container.

Jason Singh Over a year ago

I didn't realise it was incorrect before my bad.

ThS Over a year ago

in my answer, I did correct almost all the mistakes in the markup I found, and I changed the span that holds the error message to a p tag and removed the float rule from the inputs, try to follow along with my answer it should work as it's working in the snippet.

|

devdob · Accepted Answer · 2018-09-06 22:58:48Z

0

Use jquery .change function and check for the value being empty.

$(".name").change(function {
     if (!$this.val()) {
         $(".emsg").addClass("hidden")
    }
})

Hope this helps.

answered Sep 6, 2018 at 22:58

devdob

1,53413 silver badges15 bronze badges

Comments

zerosand1s · Accepted Answer · 2018-09-06 23:48:18Z

I am not sure if you specifically want to add or remove CSS class but you can also set error message hidden by default (CSS or inline style property) and show it only if there is an error. So you would do like this

$(function() {
  var $regexname = /^([a-zA-Z]{2,16})$/;
  $('.name').on('keypress keydown keyup', function() {
    if ($(this).val().trim().length && !$(this).val().match($regexname)) {
      // there is a mismatch, hence show the error message
      $('.emsg').show();
    } else {
      $('.emsg').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="signupsectioncontainer-stage2">
  <h1 id="signup2title">Sign Up</h1>
  <div id="signupsectioncontainer-stage3">
    <div id="signup2validationinputs">
      <input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
      <p>
        <span id="validname" class="emsg" style="display:none;">Please Enter a Valid Name</span>
      </p>
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
      <input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
      <input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
      <button id="signup2submitbutton">SIGN UP</button>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

jQuery Text Input Real Time Validation clear error when input empty [duplicate]

3 Answers 3

21 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

21 Comments

Comments

Comments

Linked

Related