E. Martinnez E. Martinnez - 1 month ago 12
Javascript Question

How to validate multiple inputs every focusout event using jquery?

Good day everyone, I'm having a problem on validating my inputs using

focusout
event. What i wan't is, every time the input was
focusout
it will validate that input only without affecting the other inputs. The problem is i have a lot of inputs and i wan't it with the same id. That's the problem because when one of my inputs triggered it validate all. I had a lot of research to this and some where relevant to my question but i still i don't get it and i'm new to programming. I need help please!

heres the link: https://jsfiddle.net/m7wa35tc/



var Main = {

init: function(){
this.handleBinds();

},

handleBinds: function(){

$('.required').on("keyup", function(){
if($.trim($(this).val()).length < 1){
$(this).css("border-color", "red");
}else{
$(this).css("border-color", "");
}

});

}

};
$(document).ready(function(){

Main.init();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Name
<input type="text" id="required">
</label>
<br>
<label>Corporate or Legal Name
<input type="text" id="required">
</label>
<br>
<label>Location Address
<input type="text" id="required">
</label>
<br>
<label>City, State
<input type="text" id="required">
</label>
<br>
<label>Zip/Postal Code
<input type="text" id="required">
</label>
<br>
<label>Country
<input type="text" id="required">
</label>
<br>
<label>Email Addresse
<input type="text" id="required">
</label>




Answer

You need to set unique id to each element you want to make reference, in this case use class="required" instead

Comments