How to do real time validation using jquery to my existing normal validation to contact form?

JavaScript
1

this is mysubmit button from where validate function is called

<button   type="submit" name="submit" value="submit"  onclick="validate()" id="submit" class="btn submit-btn">Sign Up Now</button>

this is my script for validate function

<script>
    function validate(){
        $("#myform").on('submit',function(e) {//alert('hi');
                 e.preventDefault();
                            var name = $('#name').val();
                            var email = $('#email').val();
                            var mobile = $('#mobile').val();
                            var msg = $('#message').val();

                            $(".error").remove();
                            // $(".error").css("color", "red");
 
                                  if (name.length < 1) {
                                    $('#name').after('<span class="error">This field is required</span>');
                                     }

                                  if(email == "" ){
                                    $('#email').after('<span class="error">This field is required</span>');
                                     } 
                                     else if(email.indexOf('@') <= 0 ){
                                            
                                    $('#email').after('<span class="error">Enter a valid email</span>');
                                    }else if((email.charAt(email.length-4) != '.' ) && (email.charAt(email.length-4) != '.' )){
                                         $('#email').after('<span class="error">Enter a valid email</span>');
                                    }else{
                                        
                                    }
                                    
                                       
                                     
                                      
                                 if (mobile == "") {
                                    $('#mobile').after('<span class="error">This field is required</span>');
                                     }
                                else if(mobile.length != 10) {
                                    $('#mobile').after('<span class="error">Please enter valid mobile number. </span>');
                                     }else{
                                        //
                                     }


                                     if (msg.length < 1) {
                                    $('#message').after('<span class="error">This field is required</span>');
                                     }
                                     return false;
                                });
                         }   
</script>

these are normal validation which are working fine but now how to make it real time validation?

2

Isn’t it a case of checking each field when the user moves away from it (onBlur(), perhaps?) and running the validation at that point, and either throwing an error message or just showing an appropriate message / icon to indicate validity?

1 Like
3

yes you got it correctly but I dont know how to do it ? can you guide me ?

4

I wouldn’t like to, I’m mainly on here to learn stuff. I could probably cobble something together, but I’m sure there are far more knowledgeable people on here that can point to a decent tutorial or a much simpler method than I might think up. There’s an article on Sitepoint but it’s dated 2016 and talks about using JQuery below version 2, which seems quite old to me. Maybe someone knows of an updated version. There was quite a discussion about form validation on here recently, but I can’t find it now.

5

The recommended technique is to use a change handler on the overall form itself, allowing you to validate everything whenever a change occurs.

Note: Typing text in a form field is not a change event. The change event triggers when you leave that text field.

6

And that would be:

document.querySelector("#form").addEventListener("change", formChangeHandler);

Which in jQuery parlance would be:

$("#form").on("change", formChangeHandler);
1 Like
7

hey thaks for recommending but what is formChangeHandler and how can I integrate it with my existing validation?

8

It’s usually best for functions that handle events to be suitably named.

In this case, it’s a function that accepts an event object, so that it can easily get the form from that object.

function formChangeHandler(evt) {
    var field = evt.target;
    var form = field.form;
    // add code below here, that runs every time a form field is changed.
    ...
}
1 Like
9

ok now I have done this
for example here I amm doing it just for name attribute to make this simple to understand

  function formChangeHandler(event) {
             var field = event.target;
            var form = field.form;
       
                        var name = $('#name').val();
                       
                        $(".error").remove();
                        // $(".error").css("color", "red");

                              if (name.length < 1) {
                                $('#name').after('<span class="error">This field is required</span>');
                                 }
           else{
           //some code
          }
            

        </script>

is this correct ? and how will my submit event will appen then? I tried it in other ways but that didn’t work.
Sorry for the spelling mistake, I have updated it now

10

When that if statement is true, and shows the error, the execution of code will then carry on to send the form.

That doesn’t seem to be the correct type of behaviour.

11

You might also need to check your spelling.

12

Also, attempting to send the form each and every time that the form changes, is very bad behavior.
You should not have that send function anywhere near the formChangeHandler function.

1 Like
13

I have removed it from that function I have some doubts

  • How can I call send function?

  • where sould I put this below code in my case ?

                       $("#contact_form").on("change", formChangeHandler(event) {
                         //what should I do here then to submit or to go further 
  });
14

When the form fields are being validated on each and every change, that is no place at all for the send function.
The send function belongs in a completely different place, on a form submit event function instead.

You can put it anywhere that it can access the form. It’s normally recommended that even handlers are among the last functions on the page, which allows them to access and use everything else above them.

1 Like
15

ok thats clear now , but what I meant was what should I insert into the above jquery code ?

16

As your stated intention is to do real-time validation, you should put the validation code there.

1 Like
17

hey thanks for your suggestions , I have found another easy way to do this I did it just by adding this line

                         $("#contact_form").on('change', 'input', function() {
                          //my validation code here 
           }

and then cling send functon on clicking submit
and thats solved my real time validation issue .
but still the form is not submiting twice after first submit untill I refresh the page
How can I fix it ?

18

That behaviour that you speak of doesn’t seem to be consistent with how forms are supposed to be used on a web page.

Can you please explain further about what your expected use of the form is supposed to achieve?

2 Likes
19

I am using form to send email after submiting , I am just learning new concepts and real time validation is one of the good practice thats why I am trying this functionality

20

Which of these is responsible for causing the email to be sent?

  • Is it the form action that sends the email after submitting
  • or is it the send function, which issues the ajax request with the form data?
2 Likes