CODEWITHSUNDEEP
jqueryhtmlvalidation
Valentine
Valentine

Reputation: 88

Optimization of the form of validation using jQuery

I want to do validation, which displays an error message in the placeholder of the input. I write code to check the 1 form field, and change its placeholder if it's empty. How can this be optimized for three fields?

$(document).ready(function() {
$("#submit").click(function() { if($("#name").val()==''||$("#name").val()==null){ $("#name").val("").attr("placeholder","An error occured!").addClass("changePlaceColor1").addClass("changePlaceColor2").addClass("changePlaceColor3").addClass("changePlaceColor4");    }  })  })

here is my code in the codepen

Also want to do that to these changes remain until you press input.

Upvotes: 1

Views: 236

Answers (3)

Elentriel
Elentriel

Reputation: 1237

just add a class="validation" to all your fields that need to be validated, and change your js to this

<form>
  <input id="name" type="text" placeholder="test message1" data-error="1" class="validation" />
  <input id="phone" type="tel" placeholder="test message1" data-error="2" class="validation"/>
  <input id="email" type="email" placeholder="test message1" data-error="3" class="validation"/>
  <button id="submit">Submit</button>
</form>

 $(document).ready(function() {
  $("#submit").click(function(e) {
    $(".validation").each(function(){
        if($(this).val()==''||$(this).val()==null){
          $(this).val("")
            .attr("placeholder",$(this).data("error"))
            .addClass("changePlaceColor1")
            .addClass("changePlaceColor2")
            .addClass("changePlaceColor3")
            .addClass("changePlaceColor4");
            e.preventDefault();
          }
    });
  })
});

No reason to add validation for each field sepperatly, add a basic validation code and loop through all applicable fields. Less time the same piece of code you have, the better your code is

EDIT: Custom error text for each input through data attribute

Upvotes: 2

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: You can use $('form').on('submit' , function(){ //code here }); Take a look here

2nd: You need to use e.preventDefault(); to prevent reload

3rd: You need to use .each() posted in @Elentriel answer and @jonju answer

4th: With addClass() you can use .addClass("changePlaceColor1 changePlaceColor2 changePlaceColor4"); Take a look here

Upvotes: 0

jonju
jonju

Reputation: 2736

$("#submit").click(function() {  
    $('input').each(function(){
      if($(this).val()=='' || $(this).val()==null){
        $(this).attr('placeholder','An error occured!').addClass('changePlaceColor');
      }
    });
  });
.changePlaceColor::-webkit-input-placeholder {
    color:    red;
}
.changePlaceColor:-moz-placeholder {
    color:    red;
}
.changePlaceColor:-ms-input-placeholder {
    color:    red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="name" type="text" placeholder="test message1"/>
  <input id="phone" type="tel" placeholder="test message1"/>
  <input id="email" type="email" placeholder="test message1"/>
  <button type="button" id="submit">Submit</button>
</form>

Upvotes: 1

Related Questions