I have a small form, the fields of which I check. I need to organize a check if the user fills in the first two inputs with the text type and one input with the file type, the data is sent, otherwise an error, and this option, if the user does not select the file, then he must fill in all 11 fields with the text type, otherwise mistake. Tell me what am I doing wrong?

$("form").eq($indx_form).on("click", $el, function (event) { event.preventDefault(); var data = new FormData(document.forms[1]); data.append( 'file', $('input[type=file]')[0].files[0] ); var cnt=0; var first_three= $("#conclusion-treaty input:lt(2)"); $('#conclusion-treaty input[type="text"]').each(function(i){ val=$(this).val(); if(val.length!=0 || val.length!="" || val.length!="undefined") cnt++ console.log(cnt,i) }) if( (cnt != 11 ) || ( (first_three.length!=2) || ( $("input[type=file]").val()=="") ) ){ $(".info_block").html("Вы не заполнили поля"); console.log(cnt) } else { $(".info_block").html("Ваше сообщение отправлено"); $.ajax({ type: "POST", processData: false, contentType: false, url: "read.php", data: {data}, success: function(){ alert('Ваши данные оправленны'); } }) .done(function( file ) { console.log(file) }); } }); 
 input{ display:block; margin:10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action=""> <input type="text" name="item1"> <input type="text" name="item2"> <input type="file" name="file"> <input type="text" name="item3"> <input type="text" name="item4"> <input type="text" name="item5"> <input type="text" name="item6"> <input type="text" name="item7"> <input type="text" name="item8"> <input type="text" name="item9"> <input type="text" name="item10"> <input type="text" name="item11"> <input type="submit" id="send"> </form>

  • Can you tell us about the conclusion of a treaty and why there is no such element in the enclosed code? Well, in general, you have a strange approach to submit processing. It needs something like $("form").on("submit",function(e){}) - alexoander

1 answer 1

As I wrote in the comment, the first is that there is a problem with the submit call. It’s better to do so with $("form").on("submit",function(e){})

The second point in the checks - you have a wrong understanding of the work of the sample in jQuery. $("#conclusion-treaty input[type='text']:lt(11)").val == "")
This piece of code will not do what you expect from it. Because the result of the selection is an array of elements and the answer to val will be completely different than the values ​​of the inputs. Check that all elements are not empty is better all the same through the cycle. As actually, and other checks.

Perhaps the best solution is to use function(indx, el){} to your sample, indicating the function to check for an empty element.

PS and in order not to write crutches - it is best to use ready-made options - for example, validate JQuery (look here)

  • I changed the source code, I made a check of 11 inputs through a cycle, but it still doesn’t work - ChromeChrome
  • Because it does not know where to find the item # contract-treaty. If this is some kind of parent element then fine. Do you even have to go inside each? - alexoander