Question

我正面临一个问题。我已经编写了验证输入字段的代码，对其进行了测试并且工作正常。然后我使用Jquery Ajax帖子实现了表单提交。现在我的问题是，当我单击提交按钮时，我之前实现的验证功能不再被调用。没有验证。

在stackoverflow上发布了同样的问题，但它没有解决我的问题 问题的一个答案

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

  ... 
});

我不知道如何使用上面的代码

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代码和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();
          });

        }


      });

    });

  });
});

Answer 1

您正在向表单添加事件侦听器。从表单中删除onsubmit事件侦听器，并在jQuery中调用validd函数

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

如果函数validd返回false，它将阻止ajax调用。

＆＃13;

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();
          });

        }


      });

    });

  });
});

＆＃13;

<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>

＆＃13;

在ajax提交期间，Javascript表单验证无效

1 个答案: