表单提交时验证输入框

Question

我已经创建了一个表单，其中输入框将动态显示，其中一些需要=“required”而另一些则不需要。我正在使用ajax提交此表单，并且我希望每当必填字段为空时通过Jquery / Ajax提醒某些内容。输入框的名称是动态的，如name []，roll []。我怎样才能做到这一点？

//样品

<form action="page.php">
  <div class="form-group">
    <label style="font-size:15px">Name</label>
    <input type="text" name="name[]" class="form-control" placeholder="Enter your name" value="" required>
    <input type="text" name="class[]" class="form-control" placeholder="Enter your class" value="">
   </div>   
</form>

通过单击添加更多来动态显示相同的输入框，我必须提交它，并希望在必填字段为空时通过Jquery提醒消息。

Answer 1

您可以使用onblur功能。当用户点击输入框时，触发了onfocus功能，之后用户点击输入框外的某处，触发了onblur功能。因此，当onblur函数触发时，您可以检查输入的值是否为空：

<input type="text" name="name[]" class="form-control"
    placeholder="Enter your name" value=""
    onblur="if (this.value=='') alert('MY MESSAGE');"
    required>

这是你想要的吗？它有用吗？请告诉我。

修改

为了在用户点击提交时收到提醒，您应该为输入框（例如inputId）提供ID，如下所示：

<input id="inputId" type="text" name="name[]" class="form-control"
    placeholder="Enter your name" value=""
    onblur="if (this.value=='') alert('MY MESSAGE');"
    required>

然后将其添加到您的表单标记：

<form id="main_form" action=""
    onsubmit="if (inputId.value=='') { alert('MY MESSAGE'); return false; }">

AJAX代码：

function register_post() {
    $.ajax({
        url: "check.php",
        type: "POST",
        data: new FormData($("#main_form")[0]),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            $("#get_det").html(data);
            document.getElementById("register_post").submit();
        },
        error: function(data) {
          alert("There was an error. Please check details and try again.");
        }
    });
}