获取表单元素中的复选框 [英] get checkbox in form element

问题描述

我正在尝试验证表单，其中一些是必需的. 现在的问题是我无法验证复选框！ 请参阅小提琴: https://jsfiddle.net/L09q3g25/1/

I'm trying to validate a form and some of them are required. now the problem is i can't validate checkbox ! please see the fiddle: https://jsfiddle.net/L09q3g25/1/

 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
                }

                // checkbox
                //how can i validate checkbox in each loop ?



            }

        })

类似的东西不起作用:"+formItem+":radio:checked

something like this not working : "+formItem+":radio:checked

推荐答案

添加额外的验证逻辑，检查代码段.

Add an extra validation logic, Check the snippet.

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

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

  // console.log(validation)
})


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
      }
      // checkbox
      //how can i validate checkbox in each ?



    }

  })

  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>

这篇关于获取表单元素中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！