Question

我打算使用javascript提交表单。在提交表单之前，我需要验证表单。

以下是我的代码：

alert("OP Please edit me to add the validation script code, cdn link or something. Add code that triggers the validation.");

function validateForm1() {
  $("#addMapForm").validate();
  $('#addMapForm').valid();
  console.log($('#addMapForm').valid());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
  <div>
    <br />
    <br />
    <div class="col-md-12">
      <div class="form-group">
        <label>Location Name *</label>
        <input class="form-control" required />
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Unit/ Floor Number</label>
        <input class="form-control" />
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Address*</label>
        <textarea class="form-control" style="height:100px" required></textarea>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Town/ City *</label>
        <input class="form-control" required />
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Zip Code*</label>
        <input class="form-control" required/>
      </div>
    </div>
  </div>
</form>

Answer 1

您在输入中缺少name。表单只会提交命名的控件，并且没有name

的情况下，验证插件不会验证任何内容

required字段一旦添加就可以正常工作

$("#addMapForm").validate();
$("#addMapForm").valid();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
  <div>
    <br />
    <br />
    <div class="col-md-12">
      <div class="form-group">
        <label>Location Name *</label>
        <input name="location" class="form-control" required />
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Unit/ Floor Number</label>
        <input  name="unit" class="form-control" />
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Address*</label>
        <textarea  name="address" class="form-control" style="height:100px" required></textarea>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Town/ City *</label>
        <input name="city" class="form-control" required />
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Zip Code*</label>
        <input name="zip" class="form-control" required/>
      </div>
    </div>
  </div>
  <button>Submit</button>
</form>

Answer 2

我假设您使用的是：https://jqueryvalidation.org/validate/

您是否已实施其他元素的验证规则？

规则（默认值：规则是从标记（类，属性，数据）中读取的）

因此，要么用HTML定义它们，要么需要在调用.valid()之前调用的validate函数中定义它们。

这是一个例子：

$("#myform").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
});

简而言之，为了获得更精确的帮助，我们需要所有相关代码或小提琴，请放一个演示您所面临问题的示例的演示。

Answer 3

尝试此解决方案。

$('.form-control').each(function() {
    $(this).validate();
    $(this).valid();
}

Answer 4

我尝试使用以下js验证我的所有表单，但是我知道以下代码不是最佳答案，它只能在第一个输入元素上显示错误消息。

欢迎任何人发布比此更好的答案。

React

Answer 5

我给您的表单输入了一些名称属性。不知道是否在页面中添加了实际的代码，所以我在这里做了。我添加了一个按钮，仅用于演示。我添加了最简单的CSS。

$("#validateme").on('click', function() {
  console.log("validating");
  let Validator = $("#addMapForm").validate();
  Validator.form();
  console.log(Validator.valid());
});

 .error { color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
  <div>
    <br />
    <br />
    <div class="col-md-12">
      <div class="form-group">
        <label>Location Name *</label>
        <input class="form-control" name="location" required  type="text"/>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Unit/ Floor Number</label>
        <input class="form-control"  />
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Address*</label>
        <textarea class="form-control" name="address" style="height:100px" required></textarea>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Town/ City *</label>
        <input class="form-control" required type="text"/>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label>Zip Code*</label>
        <input class="form-control" name="zip" required />
      </div>
    </div>
  </div>
  <button id="validateme" type="button">Do validate</button>
</form>

jQuery Valid（）函数仅适用于第一个元素

5 个答案: