Blocking «Отправить» в форме

Question

я создаю форму:

<input type="checkbox" id="chk1">1<select name="sel1" id="sel1" class="sel"> 
    <option value="..."></option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <input type="text" name="txt1" id="txt1" class="txt"/><br /> 
<input type="checkbox" id="chk2">2<select name="sel2" id="sel2" class="sel"> 
    <option value="..."></option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <input type="text" name="txt2" id="txt2" class="txt"/><br/> 
<input type="checkbox" id="chk3">3<select name="sel3" id="sel3" class="sel"> 
    <option value="..."></option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <input type="text" name="txt3" id="txt3" class="txt"/><br /> 
<button type="submit" class="btn btn-default">Submit</button> 

И я пытаюсь создать блок на кнопку так, что если флажок: текстовое поле не может быть пустым , а раскрывающийся список должен иметь другое значение, чем «...» Если любой из этих вариантов имеет место, пользователь нажимает «submit», и ничего не должно произойти ... если все это удовлетворено, то они нажимают кнопку «Отправить», и это происходит через.

Javascript/JQuery логики я стремлюсь к что-то вроде

if ($(":checkbox:checked").length != 0) { 
    if ($(".txt").val === ("")) { 
    return false; 
    } 
    else {return true} 
    if ($(".sel").val === "...") { 
    return false; 
    } 
    else {return true} 
} 

Answer 1

event.preventDefault() будет делать, что блокирование для вас. Это предотвратит отправку формы. Вместо того, чтобы возвращать false как собственный javascript. Соберите полученный результат в cache variable, затем выполните event.preventDefault(), когда он будет оценен как false.

Answer 2

использование Jquery, чтобы предотвратить формы представления

$("button[type='submit']").on("click", function(e){ 
    e.preventDefault(); 
    if ($(":checkbox:checked").length != 0) { 
     if ($(".txt").val === ("")) { 
     return false; 
     } 
     else {$("#myForm").submit(); 
    } 
     if ($(".sel").val === "...") { 
     return false; 
     } 
     else {$("#myForm").submit();} 
    } 
    }); 

Answer 3

DEMO

Прежде всего я хотел бы исправить html и сделать wrap каждый checkbox, input, select в группе element так, что вы может легко получить соответствующие значения. Вы выбрали имеющийся syntax error и select не является самозакрывающимся tag, как <select/>, а не <select>..</select>. Поэтому ниже приводится обновленный код:

<form id="frmDetails"> 
    <div class="container"> <!--wrap them in each container--> 
     <input type="checkbox" id="chk1" value="1"/> 
     <select name="sel1" id="sel1" class="sel"> 
       <option value="0">Select</option> 
       <option value="a">a</option> 
       <option value="b">b</option> 
     </select> 
     <input type="text" name="txt1" id="txt1" class="txt"/><br /> 
    </div> 
    <div class="container"> 
     <input type="checkbox" value="2" id="chk2"/> 
     <select name="sel2" id="sel2" class="sel"> 
      <option value="0">Select</option> 
      <option value="a">a</option> 
      <option value="b">b</option> 
     </select> 
     <input type="text" name="txt2" id="txt2" class="txt"/><br/> 
    </div> 
    <div class="container"> 
     <input type="checkbox" id="chk3" value="3"/> 
     <select name="sel3" id="sel3" class="sel"> 
       <option value="0">Select</option> 
       <option value="a">a</option> 
       <option value="b">b</option> 
     </select> 
     <input type="text" name="txt3" id="txt3" class="txt"/><br /> 
    </div> 
    <button type="submit" class="btn submit btn-default">Submit</button> 
</form> 

Тогда ваши JS будет, как показано ниже:

var valid; //A global variable to check the validation 
function validate(){ 
    valid=true; //set it to true at beginning 
    $.each($('#frmDetails input:checkbox'),function(){ 
     //loop through each checkbox 
     if($(this).is(":checked")) //if it is checked 
     { 
      var selected=$(this).siblings('select').find('option:selected').val() 
      //get selected value of its select element 
      var text=$(this).siblings('input').val(); 
      //get value entered in its corresponding textbox 
      if(text=="" || selected=="0") if text="" or selected value=0 
      { 
       valid=false;//set valid to false 
       return valid;//return it 
      } 
     } 
    }); 
    return valid; //else this will be true 
} 

$(".submit").on('click',function(e){ 
    e.preventDefault(); //prevent default action of submit 
    if(validate()) //validate returns true or false 
    { 
     $("#frmDetails").submit(); //submit the form if valid 
    } 
    else 
    { 
     alert('Form is invalid, You cannot submit it'); 
     //do whatever your want here 
    } 
});