Question

我有一个表单，它使用文本框收集一些信息。一些文本框具有条纹图案，例如几个输入框只带数字。

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

但是，当用户提交表单时，我需要对另一个端点执行ajax post请求。所以，我想我必须调用preventDefault（）方法来阻止默认表单提交。

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

只有输入字段通过验证时，如何才能实现验证字段并发出ajax请求。

Answer 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");

其他一切都一样！

Answer 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;
}

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

2 个答案: