jQuery Text Input Real Time Validation clear error when input empty

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.

score 0 · Answer 1 · answered Sep 06 '18 at 22:58

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 06 '18 at 22:58

devdob

1,404
12
13

ThS · Accepted Answer · 2018-09-08T11:44:20.020

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 08 '18 at 11:44

answered Sep 06 '18 at 23:46

ThS

4,597
2
15
27

Thanks this worked great with a little adjusting :) – Jason Singh Sep 07 '18 at 21:25
@JasonSingh glad that helps ! if my answer was really helpful, kindly, mark it as accepted. – ThS Sep 07 '18 at 22:08
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 Sep 07 '18 at 22:31
I didn't realise it was incorrect before my bad. – Jason Singh Sep 07 '18 at 22:32
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. – ThS Sep 07 '18 at 22:34
Okay, the format is a little different but i'll try, on that page there is a navbar above and another container on the right for login. – Jason Singh Sep 08 '18 at 11:23
I tried to answer your question according to the informations available for me(from your post). So, if you have some additional markups or something this may change a little bit, but as a conclusion, my current answer works the way you want. – ThS Sep 08 '18 at 11:25
Sorry to be a bother, but that doesn't work in the run code snippit here, it leaves a huge gap here and when I saved the code locally the error message is always present. However when I incoperated it in my code in worked but the background color kept moving to the top of the container. – Jason Singh Sep 08 '18 at 11:31
Should I send you my full code or something? – Jason Singh Sep 08 '18 at 11:34
That gap is the actual `p` tag that holds the message because you're hiding it using the `visibility` property which doesn't removed the element from the page. Try to change `visibility: hidden;` to `display: none;` on the `.hidden` class you'll notice that the gap has disappeared. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) about `visibility` property. – ThS Sep 08 '18 at 11:35
@JasonSingh I edited my answer, now I'm using the `display` property instead of the `visibility` property in the `.hidden` class, thus no gap is left. – ThS Sep 08 '18 at 11:45
Hey, I'm the one being stupid, to save time is it alright If I personally send you my code to fix? I'm new to coding in general never mind just java script. – Jason Singh Sep 08 '18 at 12:04
Yes you can send me your code. But, about my answer, I edited it and now it has no gaps, did you check it out ? – ThS Sep 08 '18 at 12:06
Yes, here is the link to my code, the page you need is signup2.html – Jason Singh Sep 08 '18 at 12:10
https://drive.google.com/open?id=1d0Xw2hDVFs-Jl91TwHAIkP0Ri3sIcapQ – Jason Singh Sep 08 '18 at 12:10
@JasonSingh I'll check it, but if my edited answer served your needs, kindly mark it as accepted. – ThS Sep 08 '18 at 12:12
How do I do that? I'm also new to Stack Overflow :) – Jason Singh Sep 08 '18 at 12:13
@JasonSingh To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in. – ThS Sep 08 '18 at 12:15
I have now marked as accepted :) – Jason Singh Sep 08 '18 at 12:21
@JasonSingh I tried to create a new chat room with you but your reputation is less than the required(20 reputations). Where we'll be taking ? it's not professional to talk here in the comments. – ThS Sep 08 '18 at 12:26
@JasonSingh Sorry, but im using my phone right now. Is there any other possibilities like facebook ? – ThS Sep 08 '18 at 13:22

score 0 · Answer 3 · answered Sep 06 '18 at 23:48

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>

jQuery Text Input Real Time Validation clear error when input empty

3 Answers3