JavaScript 或 jQuery 中的 HTML 表单验证逻辑答案

【问题标题】：HTML Form Validation Logic in JavaScript or jQueryJavaScript 或 jQuery 中的 HTML 表单验证逻辑
【发布时间】：2021-08-22 03:15:00
【问题描述】：

我有一个表单，我应该为其编写验证逻辑。

假设有一个这样的输入字段。

<div class="group1"><label>Product code</label> <input id="code" name=""code" type="text" class="control1"></div>

如果我想让它成为必填字段，我该如何编写逻辑？

我无权访问 CSS 文件。但是有一个像这样的输入，我可以使用它有一个红色的轮廓。

<div class="group1 row has-error">
   <div><input type="text" class="control1"></div>
</div>

我必须用 JavaScript 或 jQuery 提供代码。

【问题讨论】：

标签： javascript html jquery validation

【解决方案1】：

获取一个元素并在required 属性上设置true。

const input1 = document.getElementById('code');
input1.required = true;

const input2 = document.querySelector('div.group1>div>input.control1');
input2.required = true;

<form>
  <div class="group1"><label>Product code</label>
    <input id="code" name="code" type="text" class="control1">
  </div>
  <div class="group1 row has-error">
    <div>
      <input type="text" class="control1">
    </div>
  </div>
  <input type="submit">
</form>

【讨论】：

【解决方案2】：

我想这就是你需要的

$("#formSubmit").submit(function(e) {
    e.preventDefault();
    var error_text = "<div class='text-danger error_val'>Cannot be empty</div>"
    var data = $("#formSubmit").serializeArray();
    var allInputs = $("#formSubmit input");
    for(var i=0; i<data.length; i++){
        if(data[i].value.length == 0){
            $(".group1").addClass('has-error');
            var errorDiv = $(allInputs)[i].closest('.has-error');
            $(error_text).insertAfter( errorDiv );
        }
    }
});

.has-error input{
 border: 1px solid #f00; 
}

.text-danger{
color:#f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formSubmit">
    <div class="group1 row">
        <label>Product code</label>
        <input id="code" name="code" type="text" class="control1" >
    </div>
    <button type="submit" id="submitButton">Save</button>
</form>

【讨论】：

【解决方案3】：

我知道为时已晚，但您可以使用这些函数将输入设为必需/可选

function makeFieldRequired(element, elementName) {
  let jqueryObj = $(element);
  jqueryObj.attr('title', `${elementName} is required`);
  jqueryObj.attr('required', 'true');

  if (jqueryObj.closest("form").length)
    refreshFormValidtion(jqueryObj.closest("form"));
}

function makeFieldOptional(element) {
  let jqueryObj = $(element);
  jqueryObj.removeAttr('required');
  jqueryObj.removeAttr('title');

  if (jqueryObj.closest("form").length)
    refreshFormValidtion(jqueryObj.closest("form"));
}

function refreshFormValidtion(form) {
  $(form).removeData("validator").removeData("unobtrusiveValidation");
  $.validator.unobtrusive.parse($(form));
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：