2016-11-03 10 views
-1

入力フィールドとチェックボックスがあるフォームがあります。通常、ユーザーは電子メールアドレスを入力する必要があります。しかし、特定のチェックボックスをオンにすると、電子メールアドレスは必要ありません。チェックボックスをオンにした場合、電子メールフィールドは不要です

これは、電子メールのHTMLです:

<div class="contact-label span2"> 
    <label for="contactpersonen-email">Email adres</label> 
    <div class="contact-input-field"> 
    <input type="text" class="input-text span2 required contactpersonen-email" id="contactpersonen_email1" name="contactpersonen_email1"></input> 
    </div> 
</div> 

そして、これではJavaScriptです:

jQuery.validator.addMethod("contactpersonen-email",function(value) { 
     if ($("#contactpersonen_canseestock_2").is(':checked') || $("#contactpersonen_canseestock_3").is(':checked') || $("#contactpersonen_canseestock_4").is(':checked')  || $("#contactpersonen_canseestock_5").is(':checked')) { 
     // && $('#idform :checkbox:checked').length == 1) { 
       console.log("checkbox true"); 
       console.log(contactpersonen_email1.val()); 
       return true; 
      } 
      else { 
       console.log("checkbox not true"); 
       return false; 
      } 
     }, "Email adres bestaat al"); 

     jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true }; 

     $("#idform").validate(); 

ので、場合にのみ:

<label class="checkbox" for="contactpersonen_canseestock_2">Mag goederen afhalen</label> 

:checkedで、その後のメールアドレスがされ必須ではありません。

I've made this post earlier: 
http://stackoverflow.com/questions/39980216/check-if-only-one-checkbox-is-checked/39980734#39980734 

But there was not duplicate email required in that question. 
But now it has, but only if checkbox `contactpersonen_canseestock_2` is checked, then the email adress is not required. 

私はこのようにそれを行う場合:

$("#contactpersonen_email1").focusout(function() { 
if ($('input:checkbox').is(':checked')) { 
     $("input#contactpersonen-email").removeClass("required"); 
} 
else{ 
     $("input#contactpersonen-email").addClass("required"); 
} 


}); 


jQuery.validator.addMethod("contactpersonen-email1",function(value) { 




     if ($("#contactpersonen_canseestock_2").is(':checked') || $("#contactpersonen_canseestock_3").is(':checked') || $("#contactpersonen_canseestock_4").is(':checked') 
|| $("#contactpersonen_canseestock_5").is(':checked')) {// && $('#idform :checkbox:checked').length == 1) { 



     console.log("checkbox true"); 
     console.log(contactpersonen_email1.val()); 
     return true; 

     } 
     else{ 
     console.log("checkbox not true"); 

     return false; 

     } 
    }, "Email adres bestaat al"); 

    jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true }; 

$("#idform").validate(); 

、それは仕事をdoesntの。

       contactpersonen_email:{ 
           required:true, 
           email:true 
           }, 
           contactpersonen_email1:{ 
           required:false, 
           email:true 

これは私が今持っているjQueryのです:

jQuery.validator.addMethod("contactpersonen-email1", function(value) { 
     if ($("#contactpersonen_canseestock_2").is(':checked')) { 
    alert('is checked'); 
     $("#contactpersonen-email1").removeAttr('required', false); 
} 
else{ 
     $("#contactpersonen-email1").Attr('required', true); 
} 

}, "Please fill in email"); 




jQuery.validator.addMethod("contactpersonen-email",function(value) { 




     if ($("#contactpersonen_canseestock_2").is(':checked') || $("#contactpersonen_canseestock_3").is(':checked') || $("#contactpersonen_canseestock_4").is(':checked') 
|| $("#contactpersonen_canseestock_5").is(':checked')) {// && $('#idform :checkbox:checked').length == 1) { 


     console.log("checkbox true"); 
     console.log(contactpersonen_email1.val()); 
     return true; 

     } 
     else{ 
     console.log("checkbox not true"); 

     return false; 

     } 
    }, "Email adres bestaat al"); 

    jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true }; 

$("#idform").validate(); 

         // Loop through all the input fields for contacts 
         $('#accordion .user-row').each(function (uindex, uvalue) { 

     if ($("#contactpersonen_canseestock_2").is(':checked')) { 
    console.log('is checked'); 
     $("#contactpersonen-email1").prop('required',false); 
     //$("#contactpersonen-email1").removeAttr('required', false); 
} 
else{ 
    //document.getElementById("#contactpersonen-email1").required = true 
     //$("#contactpersonen-email1").attr('required', true); 
    $("#contactpersonen-email1").prop('required',true); 
console.log('is not checked'); 
}    


          html += '<tr>'; 
          $(this).find('input').each(function (index, value) {         



           // Check if input type is a checkbox 
           if ($(this).is(":checkbox")) { 
            var JaNee = 'Nee'; 
            if ($(this).is(":checked")) JaNee = 'Ja'; 
            html = html + '<td>' + JaNee + '</td>'; 


           } 
           else { 
            // Add the value into the html 
            html = html + '<td>' + $(this).val() + '</td>'; 

           } 
          }); 

          html += '</tr>'; 
         }); 

            // Set the value from the textarea to the generated html 
            $('#verploegen_form_klantregistratie_Contactpersonen').val('<table>'+html+'</table>'); 
           }); 

          }); 



       $(function() { 
        $("#accordion").accordion({ 
         heightStyle: "content" 
        }); 
       }); 

そして、これは私の電子メールのhtmlです:

<div class="contact-label span2"> 
      <label for="contactpersonen-email">Email adres</label> 
      <div class="contact-input-field"> 
      <input type="text" class="input-text span2" id="contactpersonen_email1" required="" name="contactpersonen_email1"></input> 
      </div> 
     </div> 

これは私がこれを持っている文書上記

jquery now:

jQuery.validator.addMethod("CheckTotal",function(value) { 
     if ($("#contactpersonen_canseestock_2").is(':checked')){ 
     $("#contactpersonen-email1").removeAttr('required', false); 
    } 
    else{ 
     $("#contactpersonen-email1").attr('required', true); 
      } 
     }, "Email adres bestaat al"); 
    jQuery.validator.classRuleSettings.CheckTotal = { CheckTotal: true }; 

$("#idform").validate(); 

と、この私のhtml:

<div class="contact-label span2"> 
      <label for="contactpersonen-email">Email adres</label> 
      <div class="contact-input-field"> 
      <input type="text" class="input-text span2 required CheckTotal" id="contactpersonen_email1" name="contactpersonen_email1"></input> 
      </div> 
     </div> 
+1

Canこれのために働く[スニペット](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)を作成しますか? –

答えて

1

以下のコードを使用し '必要'

あなたは、クラスを削除したいか、このようにしてみてください。

if ($('input:checkbox').is(':checked')) { 
     $("input#contactpersonen-email").removeClass("required"); 
} 
else{ 
     $("input#contactpersonen-email").addClass("required"); 
} 

をあなたがしたいです属性「必須」を削除します。

if ($('input:checkbox').is(':checked')) { 
     $("input#contactpersonen-email").removeAttr("required"); 
} 
else{ 
     $("input#contactpersonen-email").attr("required"); 
} 
+0

ありがとうございます。私の編集ポストを参照 – SavantCode

+0

私の編集ポストを見ましたか? – SavantCode

+0

@ SavantCode正確に必要なものは? – rJ7

関連する問題