Question

我在StackOverflow上阅读了一些看似相似的问题，但实际上对于所有这些问题，孩子们之间的浏览并不是非常必要，并且可以直接检索对象的类名。

我的情况有点不同。我写的是输入的JavaScript验证器，我可以在必须执行检查的同一页面中有多个表单。在input我设置了所有全局变量，包括父表单对象parent_form。我想要实现的是现在重新启用提交按钮，但仅如果在形式中没有其他输入与类input-err（我添加到显示错误的函数中的输入，我删除了删除错误的函数）。要做到这一点，我需要不仅仅通过input-err来搜索课程$('.input-err')，因为这会在整个文档中查找该类，但在{{1}的子项中查找}。

我写了这个，但它似乎没有工作

parent_form

这是HTML表单

if (parent_form.children('.' + ERR_INPUT).length < 1) {
    children_submit_input.prop('disabled', false);
}

Answer 1

你可以这样做：

$('form').each(function(){
   var err-Input = $(this).find('.' + ERR_INPUT);
   if(err-Input).lenght < 1){
       //here add your codes
    }
 });

对于每个表单，我们找到具有ERR_INPUT类名的所有子元素，并检查我们是否有这样的元素。

如果您想在输入文本更改上执行此操作：

$('input[type=text]').on('keydown paste', function(){
  var thisForm = $(this).parents('form');
  var err-Input = thisForm.find('.' + ERR_INPUT);
  if(err-Input).lenght < 1){
     var submitButton = thisForm.find('input[type=submit]');
     submitButton.prop('disabled', 'false');  // or  submitButton.removeAttr('disabled');
  }
});

Answer 2

纯Javascript解决方案。

＆＃13;

var form = document.getElementById('capote');
var submit = document.getElementById('capote-submit');

function hasClass(element, cls) { // Check if contains class
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function formValidation() {
  var formNodes = form.childNodes; // childs of form
  var error = false;
  for (var i = 0; i < formNodes.length; i++) {
    var divNodes = formNodes[i].childNodes; // childs of divs that contains inputs
    for (var k = 0; k < divNodes.length; k++) {
      if (hasClass(divNodes[k], 'err-input')) { // has class 'err-input'
        error = true;
        break;
      }
    }
  }

  if (!error)
    submit.disabled = false; // if there is no input with class 'err-input', enable submit button
}

formValidation();

＆＃13;

<form action="" id="capote">
  <div class="input-container">
    <input type="email" id="email1" placeholder="Email (not required)" data-thoth-filter="email">
    <input type="email" id="email2" placeholder="Email (required)" data-thoth-filter="email" required>
  </div>

  <div class="input-container">
    <input type="email" id="normal1" placeholder="Normal field (not required)">
    <input type="email" id="normal2" placeholder="Normal field (required)" required>
  </div>

  <div class="input-container">
    <input type="text" id="cf1" placeholder="C.F. (not required)" data-thoth-filter="codice_fiscale">
    <input type="text" id="cf2" placeholder="C.F. (required)" data-thoth-filter="codice_fiscale" required>
  </div>

  <input type="submit" id="capote-submit" value="Invia">

</form>

＆＃13;

Answer 3

使用jQuery的一种方法如下：

// binding the anonymous function of the on() method as
// the event-handler for the 'input' event:
$('input').on('input', function() {

  // caching the relevant ancestor HTMLFormElement, using the 
  // HTMLInputElement.form property (also available to
  // HTMLTextAreaElement and HTMLSelectElement); and making
  // it a jQuery Object:
  let form = $(this.form);

  // here we toggle the class of 'ERR_INPUT' according to
  // the following switch (the class is applied if the
  // switch is true/truthy, and removed if the switch is
  // false/falsey):
  $(this).toggleClass('ERR_INPUT',

    // here we test to find if this (the HTMLInputElement)
    // is both required AND it is NOT ('!') valid
    // (from the HTMLInputElement.validity.valid property):
    this.required && !this.validity.valid);

  // here we find the <input> element(s) whose 'type' attribute
  // is equal to 'submit', and we update its 'disabled' property:
  form.find('input[type=submit]').prop('disabled',

    // if we find any non-zero number of <input> elements which
    // are required and are invalid, this returns Boolean true
    // and sets the 'disabled' property to true, otherwise if
    // there is a zero number of required <input> elements which
    // are invalid, it returns false and so the 'disabled'
    // property is false:
    form.find('input[required]:invalid').length);

// here we trigger the 'input' event on all elements returned by
// the original selector, in order to apply the relevant class
// and disabled properties on page-load:
}).trigger('input');

// preventing submission of the form (for
// the purposes of the demo).
// Here we bind the anonymous function of the on() method as the
// event-handler for the 'submit', 'animationend' and 'animationEnd'
// events:
$('form').on('submit animationend animationEnd', function(e) {

  // preventing submission of the form, for the purposes of avoiding
  // problems in this demo:
  e.preventDefault();

  // here we toggle the 'successfulSubmission' class (used in order
  // to demonstrate the working submit buttons when the criteria are
  // met); we add the class if the Event.type property is equal to
  // 'submit', and remove it if the event.type property is anything
  // other (so necessarily either 'animationend' or 'animationEnd'):
  $(this).toggleClass('successfulSubmission', e.type === 'submit');
});

＆＃13;

$('input').on('input', function() {
  let form = $(this.form);
  $(this).toggleClass('ERR_INPUT', this.required && !this.validity.valid);
  form.find('input[type=submit]').prop('disabled', form.find('input[required]:invalid').length);
}).trigger('input');

// preventing submission of the form (for
// the purposes of the demo):
$('form').on('submit animationend animationEnd', function(e) {
  e.preventDefault();
  $(this).toggleClass('successfulSubmission', e.type === 'submit');
});

＆＃13;

@keyframes onsubmitAnimation {
  from {
    border-color: #f90;
  }
  to {
    border-color: transparent;
  }
}

form {
  border: 2px solid transparent;
  margin: 1em auto;
  width: 90%;
}

form.successfulSubmission {
  animation: onsubmitAnimation 1s linear 1;
}

.ERR_INPUT {
  background-color: rgba(255, 0, 0, 0.3);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="capote">
  <div class="input-container">
    <input type="email" id="email1" placeholder="Email (not required)" data-thoth-filter="email" />
    <input type="email" id="email2" placeholder="Email (required)" data-thoth-filter="email" required />
  </div>

  <div class="input-container">
    <input type="email" id="normal1" placeholder="Normal field (not required)">
    <input type="email" id="normal2" placeholder="Normal field (required)" required />
  </div>

  <div class="input-container">
    <input type="text" id="cf1" placeholder="C.F. (not required)" data-thoth-filter="codice_fiscale">
    <input type="text" id="cf2" placeholder="C.F. (required)" data-thoth-filter="codice_fiscale" required />
  </div>

  <input type="submit" id="capote-submit" value="Invia">

</form>

<form action="#" id="sinatra">
  <div class="input-container">
    <input type="email" id="email3" placeholder="Email (not required)" data-thoth-filter="email" />
    <input type="email" id="email4" placeholder="Email (required)" data-thoth-filter="email" required />
  </div>

  <div class="input-container">
    <input type="email" id="normal3" placeholder="Normal field (not required)">
    <input type="email" id="normal4" placeholder="Normal field (required)" required />
  </div>

  <div class="input-container">
    <input type="text" id="cf3" placeholder="C.F. (not required)" data-thoth-filter="codice_fiscale">
    <input type="text" id="cf4" placeholder="C.F. (required)" data-thoth-filter="codice_fiscale" required />
  </div>

  <input type="submit" id="sinatra-submit" value="Invia">

</form>

<form action="#" id="capone">
  <div class="input-container">
    <input type="email" id="email5" placeholder="Email (not required)" data-thoth-filter="email" />
    <input type="email" id="email6" placeholder="Email (required)" data-thoth-filter="email" required />
  </div>

  <div class="input-container">
    <input type="email" id="normal5" placeholder="Normal field (not required)">
    <input type="email" id="normal6" placeholder="Normal field (required)" required />
  </div>

  <div class="input-container">
    <input type="text" id="cf5" placeholder="C.F. (not required)" data-thoth-filter="codice_fiscale">
    <input type="text" id="cf6" placeholder="C.F. (required)" data-thoth-filter="codice_fiscale" required />
  </div>

  <input type="submit" id="capone-submit" value="Invia">

＆＃13;

JS Fiddle demo

在上面我特意搜索的不是具有.ERR_INPUT类的元素，而是使用选择器搜索所需和无效的元素：

form.find('input[required]:invalid').length

这是因为ERR_INPUT类仅适用于那些既需要又无效的元素，这是一种简单但可能是错误的假设。

如果我的假设是错误的，那么上述行当然可以改写为：

form.find('input.ERR_INPUT').length

＆＃13;

$('input').on('input', function() {
  let form = $(this.form);
  $(this).toggleClass('ERR_INPUT', this.required && !this.validity.valid);
  form.find('input[type=submit]').prop('disabled', form.find('input.ERR_INPUT').length);
}).trigger('input');

// preventing submission of the form (for
// the purposes of the demo):
$('form').on('submit animationend animationEnd', function(e) {
  e.preventDefault();
  $(this).toggleClass('successfulSubmission', e.type === 'submit');
});

＆＃13;

@keyframes onsubmitAnimation {
  from {
    border-color: #f90;
  }
  to {
    border-color: transparent;
  }
}

form {
  border: 2px solid transparent;
  margin: 1em auto;
  width: 90%;
}

form.successfulSubmission {
  animation: onsubmitAnimation 1s linear 1;
}

.ERR_INPUT {
  background-color: rgba(255, 0, 0, 0.3);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="capote">
  <div class="input-container">
    <input type="email" id="email1" placeholder="Email (not required)" data-thoth-filter="email" />
    <input type="email" id="email2" placeholder="Email (required)" data-thoth-filter="email" required />
  </div>

  <div class="input-container">
    <input type="email" id="normal1" placeholder="Normal field (not required)">
    <input type="email" id="normal2" placeholder="Normal field (required)" required />
  </div>

  <div class="input-container">
    <input type="text" id="cf1" placeholder="C.F. (not required)" data-thoth-filter="codice_fiscale">
    <input type="text" id="cf2" placeholder="C.F. (required)" data-thoth-filter="codice_fiscale" required />
  </div>

  <input type="submit" id="capote-submit" value="Invia">

</form>

<form action="#" id="sinatra">
  <div class="input-container">
    <input type="email" id="email3" placeholder="Email (not required)" data-thoth-filter="email" />
    <input type="email" id="email4" placeholder="Email (required)" data-thoth-filter="email" required />
  </div>

  <div class="input-container">
    <input type="email" id="normal3" placeholder="Normal field (not required)">
    <input type="email" id="normal4" placeholder="Normal field (required)" required />
  </div>

  <div class="input-container">
    <input type="text" id="cf3" placeholder="C.F. (not required)" data-thoth-filter="codice_fiscale">
    <input type="text" id="cf4" placeholder="C.F. (required)" data-thoth-filter="codice_fiscale" required />
  </div>

  <input type="submit" id="sinatra-submit" value="Invia">

</form>

<form action="#" id="capone">
  <div class="input-container">
    <input type="email" id="email5" placeholder="Email (not required)" data-thoth-filter="email" />
    <input type="email" id="email6" placeholder="Email (required)" data-thoth-filter="email" required />
  </div>

  <div class="input-container">
    <input type="email" id="normal5" placeholder="Normal field (not required)">
    <input type="email" id="normal6" placeholder="Normal field (required)" required />
  </div>

  <div class="input-container">
    <input type="text" id="cf5" placeholder="C.F. (not required)" data-thoth-filter="codice_fiscale">
    <input type="text" id="cf6" placeholder="C.F. (required)" data-thoth-filter="codice_fiscale" required />
  </div>

  <input type="submit" id="capone-submit" value="Invia">

＆＃13;

JS Fiddle demo

参考文献：

CSS：
- Attribute selectors [attribute=attributeValue]。
- :valid and :invalid pseudo-classes (Selectors Level 4 Working Draft)。
JavaScript的：
- Event.preventDefault()。
- HTMLFormElement。
- HTMLInputElement。
jQuery的：
- filter()。
- on()。
- prop()。
- toggleClass()。
- trigger()。

Answer 4

//如果您使用的是jQuery，请转到：

$("form#capote:input").each(function(){
     // if input has class ERR_INPUT, disable submit button.
});

//快乐编码。

从父表单开始，使用特定类获取所有子项输入

4 个答案: