2012-06-27 37 views
12

Genellikle PHP ile çalışıyorum, bu yüzden ne yazık ki bazı temel JS ilkeleri yok. Tüm bu başarmak istediğim şey - bu konuda birçok gönderi gördüm ama genellikle ihtiyacım olanın ötesindeler.Basit JavaScript Onay Kutusu Doğrulama

<input type="checkbox" name="checkbox" value="check" /> 
<input type="submit" name="email_submit" value="submit" onclick="----??----" /> 

onay kutusunun basit "katılıyorum" dir:

İşte benim şeklidir. Gönder düğmesine basılmasını ve yalnızca bu onay kutusu seçiliyse gönderilmesini istiyorum.

İşte şudur: Basit, hile yolunu - hiçbir yöntem - bu formdaki bazı satır içi kodları istiyorum (aşırı uzun değil mi varsayılır?). Bu bir genel sayfa değil, sadece bu tür bir doğrulama ile hızlı ve basit bir şeye ihtiyacım var. İşaretlenmemişse, bir uyarı(); eğer kontrol edildiyse, php yoluyla gönderim yoluyla gönderilecek ve normal olarak devam edecektir.

cevap

29

Sen kullanabilirsiniz:

if(!this.form.checkbox.checked) 
{ 
    alert('You must agree to the terms first.'); 
    return false; 
} 

(demo page). (Formu göndererek, bu durumda) meydana gelen varsayılan eylemi önleyecektir bir satır içi olay işleyicisinden false dönen

<input type="checkbox" name="checkbox" value="check" /> 
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" /> 
  • .
  • !, Boolean NOT operator'dur. Olay işleyicisinin eklendiği öğe olduğundan,
  • this gönder düğmesine basılmıştır.
  • .form
  • düğmesi
  • .checkbox
  • o şekilde "onay kutusunun" adlı kontrolüdür içinde. Olduğunu teslim şeklidir. Onay kutusu işaretliyse, onay kutusu işaretliyse ve false ise
  • .checked doğrudur.
+0

Hey bu harika çalışıyor, sadece bir şey, bu yanlış ise nasıl bir uyarı gösterebilirim? – KickingLettuce

+0

@KickingLettuce: "this.form.checkbox.checked" onay kutusu işaretli değilse ('' 'operatöründen dolayı) false olur. Onay kutusu işaretlendiğinde gösterilecek farklı bir uyarı istiyorsanız, 'else' ifadesini kullanabilirsiniz. – PleaseStand

4

Böyle bir şey yapabilirsiniz: az okunaklı IMHO rağmen

<form action="../" onsubmit="return checkCheckBoxes(this);"> 
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p> 
    <p><input type="SUBMIT" value="Submit!"></p> 
</form> 

<script type="text/javascript" language="JavaScript"> 
<!-- 
function checkCheckBoxes(theForm) { 
    if (
    theForm.MyCheckbox.checked == false) 
    { 
     alert ('You didn\'t choose any of the checkboxes!'); 
     return false; 
    } else {  
     return true; 
    } 
} 
//--> 
</script> 

http://lab.artlung.com/validate-checkbox/

, bu böyle ayrı bir fonksiyon tanımı olmadan yapılabilir:

<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }"> 
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p> 
    <p><input type="SUBMIT" value="Submit!"></p> 
</form> 
+0

OP, satır içi komut dosyası istedi, yöntem yok. – tjscience

+0

Şey ... işlev gövdesini onsubmit özelliğine eklemek zor değil, ancak bu daha az okunaklı hale geliyor. Bu seçeneği yansıtacak cevabı güncelleyeceğim. –

1

sizin onay kutusu ise bir 'checkbox' kimliği vardır:

if(document.getElementById('checkbox').checked == true){ // code here } 

HTH

3

Aşağıdaki yapabilirsiniz:

İşte
<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }"> 
    <input type="checkbox" name="checkbox" value="check" id="agree" /> 
    <input type="submit" name="email_submit" value="submit" /> 
</form>​ 

bir çalışma demodur - http://jsfiddle.net/Ccr2x/

2
var confirm=document.getElementById("confirm").value; 
     if((confirm.checked==false) 
     { 
     alert("plz check the checkbox field"); 
     document.getElementbyId("confirm").focus(); 
     return false; 
     } 
+0

eğer ((confirm.checked == false) plz değiştirirse (confirm.checked == false) –

-2

adamlar çok kolay doğrulama bu tür yapabilirsiniz. Sadece onay kutularının kimliğini veya adını izlemelisiniz. Statik veya dinamik olarak yapabilirsiniz.

İstatiksel olarak, onay kutularının sabit kodlanmış kimliğini kullanabilir ve dinamik olarak alan adını bir dizi olarak kullanabilir ve bir döngü oluşturabilirsiniz.

Lütfen aşağıdaki bağlantıyı kontrol edin. Benim amacım çok kolay olacak.

http://expertsdiscussion.com/checkbox-validation-using-javascript-t29.html

Teşekkür

1

onay kutusunun kimliği " Sil" Eğer ait "onclick" olay için Gönder düğmesine olarak olabilir javascript fonksiyonu aşağıdaki gibidir:

html: 
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td> 
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()"> 

script: 
<script type="text/Javascript"> 
    function deleteData() { 
     if(!document.getElementById('Delete').checked){ 
      alert('Checkbox not checked'); 
      return false; 
     } 
</script> 
4

Şu an için, herhangi bir kullanım veya php nee ded. Bu doğrulamak ve onay kutusu seçmesi önce herhangi teslim önleyecektir. Dil bağımsız çözüm kullanıcılarının web tarayıcısı tarafından oluşturulan çünkü burada

<form> 
     <p> 
      <input class="form-control" type="text" name="email" /> 
      <input type="submit" value="ok" class="btn btn-success" name="submit" /> 
      <input type="hidden" name="action" value="0" /> 
     </p> 
     <p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p> 
</form> 

gibi sadece "gerekli" HTML5 giriş attrbute kullanın.

1

Başka bir basit işlev, işlev oluşturmak ve onay kutularının işaretli olup olmadığını kontrol etmek ve jQuery'yi kullanarak bir düğmeyi devre dışı bırakmaktır.

HTML:

<input type="checkbox" id="myCheckbox" /> 
<input type="submit" id="myButton" /> 

JavaScript:

var alterDisabledState = function() { 

var isMyCheckboxChecked = $('#myCheckbox').is(':checked'); 

    if (isMyCheckboxChecked) { 
    $('myButton').removeAttr("disabled"); 
    } 
    else { 
      $('myButton').attr("disabled", "disabled"); 
    } 
} 

Şimdi onlar onay kutusunu seçene kadar devre dışı bir düğme var ve şimdi daha iyi bir kullanıcı deneyimi var. Yine de sunucu tarafı doğrulamasını yaptığınızdan emin olabilirsiniz.