Input validation on bootstrap html form with javascript addevent listener

Question

i'm having difficulties with validating the value of a text box element in the html with the addeventlistener in my javascript. It does not properly validate my input in the following ways :

1)Showing "field is empty" even when I have values in that textbox. 2)Only validates when i click submit. <-- (how do i perform the validation as the user clicks out of the text box? )

The following is the relevant html code (with bootstrap classes):

      <div class ="col-lg-8">
        <div class="form-group">
            <label for="inputfirstName" class="col-sm-2 control-label">First Name</label>
                  <div class="col-sm-10">
                    <input  type="text"  class="form-control" id="inputfirstName" 
                       placeholder="Enter First Name" />
                    </div>
        </div>

The following is the relevant javascript code to valdiate that the First name text box field is not empty and if it is it should return a custom validation error

window.addEventListener('load',init);
function init()
{
var firstname = document.getElementById("inputfirstName");
firstname.addEventListener('onmouseclick',validateFirstname(firstname));
}

function validateFirstname(e){
var checker = e.value;
    if (checker == ""){
    e.setCustomValidity("This field must not be blank !");

    }
}

score 0 · Answer 1 · edited May 23 '17 at 10:26

I am not really sure, when you want to validate your input. Currently, you are listening to the user clicking into your textbox and performing the validation in that very moment.

However, since you are only adding the validation error with your call to e.setCustomValidity it won't display until you post your form. This is by design of setCustomValidity. This is explained in more details here: How to force a html5 form validation without submitting it via jQuery

To validate your textbox after the user entered his text, you would use the input and change events. Input fires when the user types something into your textbox, change after the user leaves the textbox. To trigger the validation regardless of the user ever focusing on that field, you also have to set your input to "required". Then to display your message instead of the standard required message of HTML5 you also have to add the invalid event to your event listeners. You can find a more refined answer here with the complete code on how to accomplish this here: Set custom HTML5 required field validation message

<input  type="text" class="form-control" id="inputfirstName" 
                   placeholder="Enter First Name" required="required"/>


window.addEventListener('load',init);
function init()
{
var firstname = document.getElementById("inputfirstName");
firstname.addEventListener('input',validateFirstname(firstname));
firstname.addEventListener('change',validateFirstname(firstname));+
}

function validateFirstname(e){
    var checker = e.value;
    if (checker == ""){
       e.setCustomValidity("This field must not be blank !");
    }
    else{
       e.setCustomValidity("");
    }
}

Input validation on bootstrap html form with javascript addevent listener

1 Answers1