Javascript form validation not working during ajax submission

Question

I am facing an issue. I have written code for validating my input fields, tested it and it was working fine. Then i implemented form submit using Jquery Ajax post. Now my problem is that the validate function which i implemented earlier is no longer getting called when i click the submit button. Without validation.

Same question posted on stackoverflow but its not resolve my problam some one answer of the question

$('#submit').click(function (e){
    e.preventDefault();   
    if(!$("form").valid()) return;

  ... 
});

I did not know how to use above code

HTML

<div class='well'>
  <form action="" method="post" class="contactf" name="contactform" onsubmit="return validd()">
    <div class='row'>
      <div class='col-sm-4'>
        <div class='form-group'>
          <label for='fname'>Name</label>
          <input type='text' name='namee' class='form-control' />
        </div>
        <div class='form-group'>
          <label for='number'>Number</label>
          <input type='number' name='numberr' class='form-control' />
        </div>
        <div class='form-group'>
          <label for='email'>Email</label>
          <input type='email' name='emaill' class='form-control' />
        </div>
        <div class='form-group'>
          <label for='subject'>Subject</label>
          <input type='text' name='subjectt' class='form-control' />
        </div>
      </div>
      <div class='col-sm-8'>
        <div class='form-group'>
          <label for='message'>Message</label>
          <textarea class='form-control' name='messagee' rows='10'></textarea>
        </div>
        <div class='text-right'>
          <input type='submit' name="contactsubmit" class='btn btn-primary' value='Submit' />
        </div>
      </div>
    </div>
  </form>
  <div class="thanks" style="display: none;">
    <h3>Thanks for Enquiry us..Our Team will contact you as soon as possible</h3>
  </div>
</div>

Javascript code and Ajax

function validd() {
  var nam = document.contactform.namee.value;
  var number = document.contactform.numberr.value;
  var email = document.contactform.emaill.value;
  var subject = document.contactform.subjectt.value;
  var message = document.contactform.messagee.value;

  if (nam == "") {
    alert('Please Fill Your Name');
    document.contactform.namee.focus();
    return false;
  }

  if (number == "" || number == null) {
    alert('Please Enter Your Number');
    document.contactform.numberr.focus();
    return false;
  }

  if (number.length < 9) {
    alert('Please Enter Your Number at least 10 Digit');
    document.contactform.numberr.focus();
    return false;
  }


  if (email == "" || email == null) {
    alert('Enteryour Email');
    document.contactform.emaill.focus();
    return false;
  }

  if (subject == "" || subject == null) {
    alert('Please Fill Your Subject');
    document.contactform.subjectt.focus();
    return false;
  }

  if (message == "" || message == null) {
    alert('Please Fill Your Message');
    document.contactform.messagee.focus();
    return false;
  } else {
    return true;
  }
}
$(document).ready(function() {
  $(function() {
    $('.contactf').submit(function(e) {
      e.preventDefault();

      var form = $(this);
      var post_url = 'contact-enquiry.php';
      var post_data = form.serialize();
      $.ajax({
        type: 'POST',
        url: post_url,
        data: post_data,
        success: function(msg) {
          $(form).fadeOut(80, function() {
            form.html(msg).fadeIn().delay(100);
            $('.thanks').fadeIn();
          });

        }


      });

    });

  });
});

@kevinSpaceyIsKeyserSöze onsubmit="return validd()" on <form> field is validation function — Inderjeet
– Inderjeet, Commented Aug 25, 2017 at 6:51
@Inderjeet remove the onsubmit event listener and call the function inside jQuery function — Sagar V
– Sagar V, Commented Aug 25, 2017 at 7:02

Sagar V · Accepted Answer · 2017-08-25 06:59:50Z

You are adding to event listeners to the form. Remove the onsubmit event listener from the form and call the validd function inside jQuery as

$('.contactf').submit(function(e) {
      e.preventDefault();
      if(!validd()) return false;
        ^^^^^^^^^^^^

It will prevent the ajax call if the function validd returned false.

function validd() {
  var nam = document.contactform.namee.value;
  var number = document.contactform.numberr.value;
  var email = document.contactform.emaill.value;
  var subject = document.contactform.subjectt.value;
  var message = document.contactform.messagee.value;

  if (nam == "") {
    alert('Please Fill Your Name');
    document.contactform.namee.focus();
    return false;
  }

  if (number == "" || number == null) {
    alert('Please Enter Your Number');
    document.contactform.numberr.focus();
    return false;
  }

  if (number.length < 9) {
    alert('Please Enter Your Number at least 10 Digit');
    document.contactform.numberr.focus();
    return false;
  }


  if (email == "" || email == null) {
    alert('Enteryour Email');
    document.contactform.emaill.focus();
    return false;
  }

  if (subject == "" || subject == null) {
    alert('Please Fill Your Subject');
    document.contactform.subjectt.focus();
    return false;
  }

  if (message == "" || message == null) {
    alert('Please Fill Your Message');
    document.contactform.messagee.focus();
    return false;
  } else {
    return true;
  }
}
$(document).ready(function() {
  $(function() {
    $('.contactf').submit(function(e) {
      e.preventDefault();
      if(!validd()) return false;
      var form = $(this);
      var post_url = 'contact-enquiry.php';
      var post_data = form.serialize();
      $.ajax({
        type: 'POST',
        url: post_url,
        data: post_data,
        success: function(msg) {
          $(form).fadeOut(80, function() {
            form.html(msg).fadeIn().delay(100);
            $('.thanks').fadeIn();
          });

        }


      });

    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='well'>
  <form action="" method="post" class="contactf" name="contactform">
    <div class='row'>
      <div class='col-sm-4'>
        <div class='form-group'>
          <label for='fname'>Name</label>
          <input type='text' name='namee' class='form-control' />
        </div>
        <div class='form-group'>
          <label for='number'>Number</label>
          <input type='number' name='numberr' class='form-control' />
        </div>
        <div class='form-group'>
          <label for='email'>Email</label>
          <input type='email' name='emaill' class='form-control' />
        </div>
        <div class='form-group'>
          <label for='subject'>Subject</label>
          <input type='text' name='subjectt' class='form-control' />
        </div>
      </div>
      <div class='col-sm-8'>
        <div class='form-group'>
          <label for='message'>Message</label>
          <textarea class='form-control' name='messagee' rows='10'></textarea>
        </div>
        <div class='text-right'>
          <input type='submit' name="contactsubmit" class='btn btn-primary' value='Submit' />
        </div>
      </div>
    </div>
  </form>
  <div class="thanks" style="display: none;">
    <h3>Thanks for Enquiry us..Our Team will contact you as soon as possible</h3>
  </div>
</div>

Collectives™ on Stack Overflow

Javascript form validation not working during ajax submission

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related