Validating OnInput event using JQuery

Question

I am working on a form where I want to add some validation parameters. It is a text field and I want when the user types it validates against a regex. I am using an OnInput event. When it fails, the validation parameters a label should be shown when it succeeds the validation parameter is hidden. This doesn't seem to work,,

Please assist?

Markup:

<input type="text" name="fName" id="fName" placeholder="First Name ..." class="input" required>
<label for="fName" id="firstNameErr" style="color: red; font-size: 14px; display: none;">Invalid First Name </label>

jQuery OnInput validation:

$('#fName').on("input" , function(e) {
     var value = $('#fName').val();
       //Regex
       var fReg = /^[a-zA-Z'` ]+$/i

        //If true hide error label
        if (fReg.test(value)) {
           $("label#firstNameErr").hide();           
         }
        else{
           $('label#firstNameErr').show();
         }
  });

Does the <input> exist when that code runs? Any errors in dev tools console? — charlietfl
– charlietfl, Commented Jul 19, 2019 at 14:00
@charlietfl I have edited my question but it doesnt seem to work,, I am getting this error in console SyntaxError: missing } after function body note: { opened at line 4, column 37 — Martin
– Martin, Commented Jul 19, 2019 at 14:04
No idea what is on line 4 but you need to fix that error which is blocking the rest of the code — charlietfl
– charlietfl, Commented Jul 19, 2019 at 14:06
Please don't edit code in question that changes original intent. Can cause conflict with answers made before the edit — charlietfl
– charlietfl, Commented Jul 19, 2019 at 14:21

User863 · Accepted Answer · 2019-07-19 14:15:58Z

2

Pure CSS solution

.oninvalid {
  color: red;
  font-size: 14px;
  display: none;
}

:invalid:not(:placeholder-shown) + .oninvalid {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="fName" id="fName" placeholder="First Name ..." class="input" pattern="^[a-zA-Z'` ]+$" required>
<label class="oninvalid" for="fName" id="firstNameErr">Invalid First Name </label>

Js way

using jquery toggle() because it accepts boolean to show / hide

$('#fName').on("input", function(e) {
  $("label#firstNameErr").toggle(! /^[a-zA-Z'` ]+$/i.test(this.value))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="fName" id="fName" placeholder="First Name ..." class="input" required>
<label for="fName" id="firstNameErr" style="color: red; font-size: 14px; display: none;">Invalid First Name </label>

edited Jul 19, 2019 at 14:15

answered Jul 19, 2019 at 14:08

User863

20.1k3 gold badges20 silver badges45 bronze badges

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

4 Comments

Martin Over a year ago

@User683 Thanks Alot,,, what If I have a button for submitting an want to disable it until the input is valid..Is it possible using CSS?

User863 Over a year ago

@Martin form won't submit because of invalid. check here

Martin Over a year ago

Using your Js solution,, How can I disable a submit button if the input field is invalid and enable it once the input field becomes valid.

User863 Over a year ago

@Martin what you are asking is something irrelevant to this question. You can find a lot about that online

David Fontes · Accepted Answer · 2019-07-19 14:06:54Z

0

You need to negate the match method. Previously, if it matched you would show the error message but you want it the other way around. Check this JS Bin.

    if (!value.match(fReg)) {
       $("label#firstNameErr").show();           
     }
    else{
       $('label#firstNameErr').hide();
     }

answered Jul 19, 2019 at 14:06

David Fontes

1,5102 gold badges14 silver badges18 bronze badges

2 Comments

David Fontes Over a year ago

@charlietfl check his first code example, the logic was incorrect and the error message was appearing when the input content was valid.

David Fontes Over a year ago

@charlietfl I didn't, I only negate the expression value.match(fReg) to reverse the result.

Collectives™ on Stack Overflow

Validating OnInput event using JQuery

2 Answers 2

Pure CSS solution

Js way

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Pure CSS solution

Js way

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related