javascript - 如何使用 required 属性一次显示所有必需的错误

Question

输入类型中的必需属性一次显示一次。是否可以在用户提交表单时一次性显示 html5 中所需的通知？

Answer 1

此代码片段将帮助您实现表单验证。这里我们添加一个数据属性data-required来标识必填字段并实现验证逻辑。

var $ = jQuery;
$('#form').on('submit', function(e) {
  e.preventDefault();
  let validation = validateForm($(this))

})


validateForm = (formElement) => {
  let form = formElement;
  let valid = true;
  $('.error').remove();
  const generalError = "<span class='error'>This Field can not be empty</span>";

  form.find('.form-group').each(function(index, item) {
    let formItem = $(item).find('.form-item');
    // check only inputs with validation required
    if (formItem.data('required')) {
      let type = formItem.data('field');
      let formItemLength = formItem.val().length

      if (formItem.val() === '') {
        $(item).append(generalError)
        valid = false
      }
      if (formItem.attr('type') == 'checkbox' && !formItem.is(':checked')) {
        $(item).append(generalError)
        valid = false
      }
    }

  })

  return valid
}

form {
	padding: 20px;
	background: #2c3e50;
	color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
form label,
form input,
form button {
	border: 0;
	margin-bottom: 3px;
	display: block;
	width: 100%;
}
form input {
	height: 25px;
	line-height: 25px;
	background: #fff;
	color: #000;
	padding: 0 6px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
form button {
	height: 30px;
	line-height: 30px;
	background: #e67e22;
	color: #fff;
	margin-top: 10px;
	cursor: pointer;
}
form .error {
	color: #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="form" method="post">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-item" id="name" name="name" data-field="name" data-required="required">
  </div>
  <div class="form-group">
    <label for="lastname">Lastname</label>
    <input type="text" class="form-item" id="lastname" name="lastname">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" class="form-item" data-field="email" data-required="required">
  </div>
  <div class="form-group">
    <label for="phone">Phone</label>
    <input type="text" id="phone" name="phone" class="form-item" data-field="phone" data-min="6" data-max="8" data-required="required">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-item" id="password" name="password" data-field="password" data-min="6" data-max="12" data-required="required">
  </div>
  <div class="form-group">
    <label for="agreement">Agreement</label>
    <input type="checkbox" class="form-item" id="agreement" name="agreement" data-required="required">
  </div>

  <div class="form-group">
    <label for="description">Description</label>
    <textarea cols="57" id="description" name="description" rows="10" class="form-item" data-field="description"></textarea>
  </div>

  <div class="form-action">
    <input class="form-submit" type="submit" value="Apply">
  </div>
</form>