ajax validation not working in form submit

Question

I am using ajax validation in URL field, I getting correct message (after a check from database), but still form is submitting

I want if I getting an invalid message then the form should not submit, how can I do this ?

<script>
    $(document).ready(function(){
        $("#Url").blur(function() {
            var element = $(this).val();
            $.ajax
            ({
                url: "<?php echo site_url('Welcome/check_user_status'); ?>",
                type: 'POST',
                data: "url="+element,
                success: function(data){
                    alert(data);
                    $('#emailInfo').html(data);

                    if(jQuery.trim(data) === "Emailvalid")
                    {
                        alert("Emailvalid");

                    }

                    else
                    {
                        alert("Email Invalid");
                    }
                    console.log(data);
                }

            });
        });
        // return false;
    });
</script>

Answer 1

<form name="myForm" id="myForm"> 


<script>
    $(document).ready(function(){
        $("#Url").blur(function() {
            var element = $(this).val();
            $.ajax
            ({
                url: "<?php echo site_url('Welcome/check_user_status'); ?>",
                type: 'POST',
                data: "url="+element,
                success: function(data){
                    alert(data);
                    $('#emailInfo').html(data);

                    if(jQuery.trim(data) === "Emailvalid")
                    {
                        alert("Emailvalid");

                    }

                    else
                    {
                        alert("Email Invalid");

                    $("form").submit(function(e){
                       e.preventDefault();
                     }); 
                    }
                    console.log(data);
                }

            });
        });
        // return false;
    });
</script>

Answer 2

Your tests are placed in the success callback, which is fired after the $.ajax() call has successfully POSTed data and received a response. No matter what you put in there, it is only ever going to happen after the form has been submitted.

If you are trying to do validation before your POST, you need to add that separately. Depending on what kind of validation you need, you could write your own simple tests, or use a plugin - jQuery Validation is a great option.

Answer 3

add this in your footer file

<script>
var burl="<?php echo base_url('') ?>";
var surl="<?php echo site_url('') ?>";
</script>

and then use this surl on ajax url... like this

<script>
    $(document).ready(function(){
        $("#Url").blur(function(e) { // add e
            e.preventDefault();// prevent other events
            var element = $(this).val();
            $.ajax
            ({
                url: surl+"Welcome/check_user_status",
                type: 'POST',
                data: {"url":element}, // check the change
                success: function(data){
                    if($.trim(data) === "Emailvalid"){ // instead of jQuery use $
                        alert("Emailvalid");
                        $('#emailInfo').html(data); // put here 

                    }else{ // remove the space between if and else
                        alert("Email Invalid");
                        return false; // add here 
                    }
                    console.log(data);
                }
            });
        });
    });
</script>