javascript - jQuery/JS 输入验证

Question

这是我的简单表格。我想验证两个输入是否插入了一些值并且该值不是空格。在请求被提交到服务器端之前，我怎样才能实现这样的功能？非常感谢！

<form:form method="post" action ="${addQueryOverride}">
                    <label>Enter query string and product list ID: </label>
                    <input maxlength="30" class="text span-1" name="queryOverride" id="queryOverrideId"/>
                    <input onkeypress="return isNumberKey(event)" maxlength="30" class="text span-1" name="productList" id="productListId"/>
                    <input type="submit" value="Add">
                </form:form>

Answer 1

$(function() { // when page load
  $("form").on("submit",function(e) {
    if ($.trim($("#queryOverrideId").val()) == "") {
      alert("Please enter query");
      $("#queryOverrideId").focus();
      return false;
    }
    var id = $("#productListId").val();
    if ($.trim(id) == "" || isNaN(id)) {
      alert("Please enter product list");
      $("#productListId").focus();
      return false;
    }
  });
});

Answer 2

提交时，遍历每个字段并运行检查：

$("form input:text").each(function() {
    var isValid = this.value.length > 0 && this.value.indexOf(" ") == -1;
    return isValid; //if true, go to next element, if false, break each loop
});