HTML5验证前阿贾克斯提交 [英] HTML5 validation before ajax submit

问题描述

这应该是简单的，但它的驾驶我疯了。我有我使用Ajax提交一个HTML5的形式。如果输入的值无效，有一个弹出式的反应，告诉你。我该如何检查条目之前，我跑我的AJAX提交有效？

形式：

 ＆LT;形式ID =联系形式的onsubmit =返回false;＆GT;
  ＆LT;标签=名与GT;名称：＆LT; /标签＆gt;
  ＆LT;输入类型=文本名称=名称ID =必需的名称占位符=名称/＆GT;
  ＆LT;标签=主题＆GT;主题：＆LT; /标签＆gt;
  ＆LT;输入类型=文本名称=主题ID =主题要求的占位符=主题/＆GT;
  ＆LT;标签=电子邮件＆GT;电子邮件：LT; /标签＆gt;
  ＆LT;输入类型=电子邮件NAME =电子邮件id必=电子邮件占位符=[e-mail]/＆GT;
  ＆LT;标签=消息＆gt;消息：＆LT; /标签＆gt;
  ＆LT; textarea的名字=消息ID =消息需要＆GT;＆LT; / textarea的＆GT;
  ＆LT;输入类型=提交ID =提交/＆GT;
＆LT; /形式GT;
 

提交：

  $（'＃提交）。点击（函数（）{
    变种名称= $（＃输入名称）VAL（）。
    。无功受= $（＃投入主体）VAL（）;
    变种的电子邮件= $（＃输入电子邮件）VAL（）。
    VAR消息= $（＃的输入信息）VAL（）。

    VAR dataString ='邮件='+电子邮件+'和;消息='+信息+'和受试者='+主语+'和;名称='+名;

    $阿贾克斯（{
        网址：脚本/ mail.php
        键入：POST，
        数据：dataString，
        成功：函数（MSG）{
            disablePopupContact（）;
            $（＃popupMessageSent）的CSS（知名度，可见）。
        }，
        错误：函数（）{
            警报（坏提交）;
        }
    }）;
}）;
 

解决方案

在默认情况下，jQuery的不知道的HTML5验证的东西，所以你必须做一些事情，如：

  $（'＃提交）。点击（函数（）{
    如果（$（形式）[0] .checkValidity（））{
        //表单执行code
    }其他的console.log（无效的表）;
}）;
 

This should be simple, yet it's driving me crazy. I have an html5 form that I am submitting with ajax. If you enter an invalid value, there is a popup response that tells you so. How can I check that the entries are valid before I run my ajax submit?

form:

<form id="contactForm" onsubmit="return false;">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required placeholder="Name" />
  <label for="subject">Subject:</label>
  <input type="text" name="subject" id="subject" required placeholder="Subject" />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" required placeholder="[e-mail]" />
  <label for="message">Message:</label>
  <textarea name="message" id="message" required></textarea>
  <input type="submit" id="submit"/>
</form>

submit:

$('#submit').click(function(){
    var name = $("input#name").val();
    var subject = $("input#subject").val();
    var email = $("input#email").val();
    var message = $("input#message").val();

    var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; 

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: dataString,
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

解决方案

By default, jQuery doesn't know anything about the HTML5 validation, so you'd have to do something like:

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});

这篇关于HTML5验证前阿贾克斯提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！