验证输入元素后提交 Ajax 表单答案

【问题标题】：Ajax form submit after validating input elements验证输入元素后提交 Ajax 表单
【发布时间】：2013-09-14 18:24:40
【问题描述】：

我有一个使用文本框收集一些信息的表单。一些文本框有一个严格的模式，例如少数输入框只接受数字。

我能够使用输入字段的模式属性添加验证。 http://www.w3schools.com/tags/att_input_pattern.asp

但是，当用户提交表单时，我需要向不同的端点发出 ajax 发布请求。所以，我想我必须调用 preventDefault() 方法来阻止默认表单提交。

但是当我调用 preventDefault() 时，它也会禁用验证输入字段。

只有在输入字段通过验证的情况下，如何实现验证字段并发出ajax请求。

【问题讨论】：

您可以只调用一个javascript函数并在您的表单上添加onsubmit="return false"。您还希望提交按钮调用您的 js 函数 <button class="submit" onclick="awesomeFunction()">Submit</button>

标签： javascript jquery html ajax forms

【解决方案1】：

你可以任意使用这个：

先把input[type="submit"]改成这样：

<button onclick="submitThis()">Save</button>

function submitThis() { 
  var firstInput = $("#idoffirstinput).val(); // basic validation
  if(firstInput == "correctinput") {
     $.ajax({
       // send the ajax form
     })
  }
}

您可以使用那里提供的技术或我提供的技术单独验证每个输入。 jQuery 错误将是相同的；我的意思是验证。

使用这个：

if(firstInput == "correctinput") {
  // ajax form
} else {
  // show the error popup!
}

这一点的优点是您也可以设置错误对话框弹出窗口的样式。喜欢

$("#errordiv").css("border", "1px solid #hexcode");

其他一切都一样！

【讨论】：

【解决方案2】：

HTML and jQuery:
<form id="details">
    Phone no: <input type="text" id="phone_no" pattern="[A-Za-z]{3}">
    <input type="submit" id="submit">
</form>

var input   = $('#phone_no').val();
if(input != '')
{
    var YOUR_URL = 'www.example.com';
    var formData = $('#details').serialize();// If you want to pass that data to that   URL
    $.post(YOUR_URL,formData,function(result){

    });
}
else
{
    return false;
}

【讨论】：