Ios 设备，“必填”字段和感谢信息答案

【问题标题】：Ios devices, "required" field and thank you messageIos 设备，“必填”字段和感谢信息
【发布时间】：2016-01-22 11:06:33
【问题描述】：

我想合并两个 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;
    });
});

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

如果有人想提供帮助，我会创建此链接。警报工作正常，但代码不会停止。它继续加载其余代码。

https://jsfiddle.net/L8huq1t1/

【问题讨论】：

为什么要合并代码？考虑单一责任。
您使用 jquery.validate 文件还是想要自定义验证？
这是一个联系表格。我的问题是在 Ios 中，必填字段不起作用。使用这个 javascript，我设法提醒用户。
@Yvette，你检查过我的解决方案了吗？！
@Ionut 您的解决方案不起作用。也许有一个错误;）

标签： javascript ios ajax required requiredfieldvalidator

【解决方案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 插件，这是更好的选择。但是，如果您仍然想这样做，请继续这样做也可以。

【讨论】：

感谢您的回答。我测试了您的代码，但在 ios 中无法正常工作！！！我发现了一个小错误 //e.preventDefault();并更正它 e.preventDefault();我会再试一次看看。
您的代码更容易理解，但我找不到错误的地方。在 Ios 设备上，该功能似乎无法正常工作。
@Yvette 您在 IOS 中究竟遇到了什么问题？
函数 checkValidation 不起作用。我更改了您的代码，但没有任何功能，并且可以正常工作。但我还没有设法让它 100% 工作......它显示验证警报，然后继续加载 ajax。请参阅我上面的代码。我错过了一些让它工作的小东西。
@Yvette 尝试取消注释 'e.preventDefault();'

【解决方案2】：

您可以使用具有表单提交处理程序的 jQuery Validation 插件，您可以在其中放置 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;
  }
});

【讨论】：