Ios 台设备，"required" 字段和感谢消息

Question

我想合并两个 JavaScript。第一个是使用 ajax 发送消息，第二个是提醒用户联系表单中的必填字段。

我想合并这两个，也许用一个 IF 语句，所以首先检查所有字段然后发送消息。

1 与 ajax JavaScript:

    $('document').ready(function () {
    $('form#contact-form').submit(function () {
        var form = $(this);
        var post_data = form.serialize(); //Serialized the form data for process.php
        $('#loader').html('<img src="../spinner.gif" /> Please Wait...');

        form.fadeOut(500, function () {
            form.html("<h3>Thank you.").fadeIn();
            $('#loader').html('');
        });

        // Normally would use this
        $.ajax({
            type: 'POST',
            url: 'process.php', // Your form script
            data: post_data,
            success: function(msg) {
                form.fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });

        return false;
    });
});

2 警报 JavaScript:

 $('document').ready(function () {
    $('form#contact-form').submit(function(e) {

        var ref = $(this).find("[required]");

        $(ref).each(function(){
            if ( $(this).val() == '' )
            {
                alert("Required field should not be blank.");

                $(this).focus();

                e.preventDefault();
                return false;
            }
        });  return true;
    });
});

根据下面的答案，我创建了以下代码。

我做了这个 link 如果有人想帮忙的话。警报工作正常但代码不会停止。它继续加载其余代码。

https://jsfiddle.net/L8huq1t1/

Answer 1

您可以通过以下代码完成此操作。

function checkValidation() {
        var ref = $(this).find("[required]");
        $(ref).each(function(){
            if ( $(this).val() == '' )
            {
                alert("Required field should not be blank.");
                $(this).focus();
                //e.preventDefault();
                return false;
            }
        });
        return true;
    }
$('document').ready(function () {
    $('form#contact-form').submit(function () {
        if(!checkValidation()) {
            return false;
        }

        var form = $(this);
        var post_data = form.serialize(); //Serialized the form data for process.php
        $('#loader').html('<img src="../spinner.gif" /> Please Wait...');

        form.fadeOut(500, function () {
            form.html("<h3>Thank you.").fadeIn();
            $('#loader').html('');
        });

        // Normally would use this
        $.ajax({
            type: 'POST',
            url: 'process.php', // Your form script
            data: post_data,
            success: function(msg) {
                form.fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
        return false;
    });
});

但我建议您使用 jquery.validate 插件，这是更好的选择。但是，如果你仍然想这样做，继续这样做也可以。

Answer 2

您可以使用 jQuery 验证插件，它有一个表单提交处理程序，您可以在其中放置您的 AJAX。 Link to the plugin.

您的代码应如下所示：

$('#contact-form').validate({
  rules: {
    your_input_name: {
      required: true
    }
  },
  messages: {
    your_input_name: {
      required: 'Field is required'
    }
  },
  submitHandler: function() {
    var form = $(this);
    var post_data = form.serialize(); //Serialized the form data for process.php
    $('#loader').html('<img src="../spinner.gif" /> Please Wait...');

    form.fadeOut(500, function() {
      form.html("<h3>Thank you.").fadeIn();
      $('#loader').html('');
    });

    // Normally would use this
    $.ajax({
      type: 'POST',
      url: 'process.php', // Your form script
      data: post_data,
      success: function(msg) {
        form.fadeOut(500, function() {
          form.html(msg).fadeIn();
        });
      }
    });

    return false;
  }
});

Ios 台设备，"required" 字段和感谢消息

Ios devices, "required" field and thank you message

javascript

ajax

requiredfieldvalidator

required

ios