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

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

其他一切都一样!