For some reason, I only have one input checked instead of each one with name=one . Who can tell how to make a check of each input name="one" ?

 $(document).ready(function () { var inputRequired = $( "input[name='one']" ); $('button').on('click', function() { if( !inputRequired.val() ) { console.log("Error"); $(this).parent().find("input[name='one']").val("").addClass('error'); } else { console.log("OK!"); } }) }); 
 input { display: flex; margin: 5px; } button { display: flex; margin: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class="date" type="text" name="one" > <input class="name" type="text" name="one" > <input class="money" type="text" name="one" > <input class="price" type="text" > <button>Click</button> </div>

  • if you have a selector returns an array, and you need to check each. then use a loop for this? - teran

2 answers 2

  • The value of each input can be checked separately using the each method. Alternatively, you can immediately filter input values ​​with incorrect values ​​using the filter method
  • The error class, I suppose, needs to be added only to those input that have an incorrect value.
  • Also, the error class should be removed from those elements whose value has become valid.

The result is:

 $(document).ready(function() { var $inputsRequired = $("input[name='one']"); $("button").on("click", function() { $inputsRequired.removeClass("error"); var $incorrectInputs = $inputsRequired.filter(function() { return this.value == ""; }); if ($incorrectInputs.length != 0) { console.log("Error"); $incorrectInputs.val("").addClass("error"); } else { console.log("OK!"); } }); }); 
 input { display: flex; margin: 5px; } button { display: flex; margin: 5px; } .error { background-color: red; } 
 <div> <input class="date" type="text" name="one"> <input class="name" type="text" name="one"> <input class="money" type="text" name="one"> <input class="price" type="text"> <button>Click</button> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • And you can do without each since I have a complicated structure, an example just to understand the question? - max
  • @max And how do you imagine getting data from several objects? - user218976
  • @max what is a "non-simple structure", and how does each instead of val complicate something? - Regent
  • I do not need a value, but just check whether it is empty or not. I thought I could watch each element.val() by clicking, if at least one is empty, make a mistake - max
  • I understood what the point was, each could be passed by any element, anywhere on the page, right? - max
 $(document).ready(function () { var inputRequired = $( "[name = 'one']" ); $('button').on('click', function() { if( !inputRequired.val() ) { console.log("Error"); $(this).parent().find("[name = 'one']").val("").addClass('error'); } else { console.log("OK!"); } }); });

It will also be more modern to use instead:

 $(document).ready(function () { // Ваш код });

It:

 $(function() { // Ваш код });
  • 3
    1. What's not up to date in $(document).ready ? Yes, the option is longer, but it is not deprecated and more visual. 2. Have you checked your code for performance? It seems to be modern - check for errors. In particular, checking input separately doesn't work for you. - Regent