there is a code

$(function() { var form = $("form"); var tab = form.find(".tab"); var current_index = 0; var len = tab.length; var back = $(".back"); var next = $(".next"); var submit = form.find("input[type=submit]"); function show() { submit.toggle(current_index == len - 1); next.toggle(current_index < len - 1); back.toggle(current_index > 0); tab.hide().eq(current_index).show() } show(); function audit(current_tab) { var elems = $(".required", current_tab); return [].every.call(elems, function(el, i) { var ok = el.value.trim(); ok && +ok != 0 ? el.classList.remove("empty_field") : el.classList.add("empty_field"); return ok && ok != "0" }); } next.on("click", function(event) { event.preventDefault(); var current_tab = tab.eq(current_index); var required = audit(current_tab) if (required) { current_index++; show() } }); back.on("click", function(event) { event.preventDefault(); current_index--; show() }); form.on("input change", ".required", function(event) { var ok = this.value.trim(); ok && ok != "0" && this.classList.remove("empty_field") }) form.on("submit", function(event) { return audit(form) }) submit.on("click", function(event) { return audit(form) }) });

How to apply the condition not only to .required, but also to several others (for example #parent_cat_id, #category_id and .city-input if its value = 0 ,?

In action http://plnkr.co/edit/qO8z7dk5FwruwzO2uAYf?p=preview

Thank.

  • Specify what you want. - Fes Laeda
  • I want some fields to be validated when I click on the “next step”. In the example in the first step, the class .required is applied to the drop-down lists, but unfortunately I cannot add it to the code. I would like to check them by #parent_cat_id and #category_id - WA-A
  • updated the original theme - WA-A

2 answers 2

Use the add method and add the necessary elements.

 var elems = $(".required", current_tab).add('#parent_cat_id, #category_id'); var input = $('.city-input'); if (input.val() == 0) elems = elems.add(input);
  • Thank you so much. But if I add an additional .city-input to your structure var elems = $ (". Required", current_tab) .add ('# parent_cat_id, #category_id, .city-input'); it does not allow for the second step ( - WA-A
  • Although there is essentially a check to be on the value is not equal to 0 - WA-A
  • Tell me how to implement this check? - WA-A
  • I wrongly reasoned that adding a .city-input if its value = 0, then the field (city-input) will be highlighted. Therefore, a meaningless comment left. I can not figure out how to add to the construction if value = 0, so that the check is carried out - WA-A
  • plnkr.co/edit/qO8z7dk5FwruwzO2uAYf?p=preview - WA-A

Another variant of multiple selectors is to simply write comma-separated.

 $('div, span').each((idx, el) => console.log(el.innerHTML)); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Раз два</div> <span>Три четыре</span>

  • His first selector is searched in the context of current_tab - Anton Shchyrov
  • Well, and who said that #parent_cat_id и #category_id? not in the same tab? Look at his layout, there they are in the same tab - ThisMan