Xác thực nút radio trong javascript

Cần xác thực đầu vào nút radio, tức là khi nhấn nút gửi và không có nút radio nào được chọn, nó sẽ thông báo cho người dùng nói 'vui lòng chọn hộp kiểm' và nếu nút radio đã được được chọn sau đó chỉ cần gửi biểu mẫu, không cần cảnh báo.Xác thực nút radio trong javascript

Chỉ có thể sử dụng HTML CSS và JavaScript cho điều này, tôi biết nó dễ dàng hơn gấp 1000 lần trong jquery nhưng đáng tiếc là tôi không thể sử dụng nó.

Và tôi biết HTML của mình không hợp lệ, nhưng trừ khi nó ảnh hưởng trực tiếp đến vấn đề hiện tại của tôi thì tôi sẽ xử lý sau.

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 

    First time visitor?:<br/> 
      <label for="s1">Yes</label> 
      <input type="radio" id="1" name="yesno" value="1"/> 
      <br/> 
      <label for="s2">No</label> 
      <input type="radio" id="1" name="yesno" value="2"/> 

      <br/>  

    <input type="submit" value="Submit"><br/> 
    </form>

Bất kỳ con trỏ nào được đánh giá cao, cảm ơn.

Nguồn

2012-04-26 Anonymous

Bạn xóa câu hỏi của bạn để làm lại cùng một vì bình luận tiêu cực đối với một trong những khác? Btw, đánh dấu không hợp lệ (giống như ID trùng lặp) * có * ảnh hưởng trực tiếp đến vấn đề hiện tại của bạn. –

Lưu ý: id không nên bắt đầu bằng số – keune

@benji Vui lòng gửi cho bạn chức năng validateForm. –

document.forms[ 'forms1' ].onsubmit = function() { 
    return [].some.call(this.elements, function(el) { 
     return el.type === 'radio' ? el.checked : false 
    }) 
}

Chỉ cần một cái gì đó trong đầu của tôi. Không chắc chắn mã đang hoạt động.

Nguồn

2012-04-26 18:21:37

Thứ nhất: Nếu bạn biết rằng mã của bạn không đúng, bạn nên sửa nó trước khi làm bất cứ điều gì!

Bạn có thể làm một cái gì đó như thế này:

function validateForm() { 
    var radios = document.getElementsByName("yesno"); 
    var formValid = false; 

    var i = 0; 
    while (!formValid && i < radios.length) { 
     if (radios[i].checked) formValid = true; 
     i++;   
    } 

    if (!formValid) alert("Must check some option!"); 
    return formValid; 
}

Nhìn thấy nó trong hành động: http://jsfiddle.net/FhgQS/

Nguồn

2012-04-26 18:25:38 MatuDuke

Chức năng rất đẹp. –

Tập lệnh đó sẽ hoạt động với hơn 2 nút radio, phải không? Tôi đang sử dụng mã của bạn, nhưng tôi nhận được một lỗi mà validateForm() là không xác định? Bạn nghĩ điều gì đang gây ra điều đó? – Radi

Tôi đã tìm thấy vấn đề là gì. Tôi đã sao chép nó từ jsFiddle và thêm các ký tự ẩn khiến mã của tôi bị lỗi. Đây là trang có thêm chi tiết http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Radi

Full dụ xác nhận với javascript:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Radio button: full validation example with javascript</title> 
     <script> 
      function send() { 
       var genders = document.getElementsByName("gender"); 
       if (genders[0].checked == true) { 
        alert("Your gender is male"); 
       } else if (genders[1].checked == true) { 
        alert("Your gender is female"); 
       } else { 
        // no checked 
        var msg = '<span style="color:red;">You must select your gender!</span><br /><br />'; 
        document.getElementById('msg').innerHTML = msg; 
        return false; 
       } 
       return true; 
      } 

      function reset_msg() { 
       document.getElementById('msg').innerHTML = ''; 
      } 
     </script> 
    </head> 
    <body> 
     <form action="" method="POST"> 
      <label>Gender:</label> 
      <br /> 
      <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male 
      <br /> 
      <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female 
      <br /> 
      <div id="msg"></div> 
      <input type="submit" value="send>>" onclick="return send();" /> 
     </form> 
    </body> 
</html>

Kính trọng,

Fernando

Nguồn

2013-10-23 20:11:32 Fernando

hoạt động. cảm ơn .. +1 .. –

bạn được chào đón ;-) – Fernando

Ngoài các giải pháp Javascript ở trên, bạn cũng có thể sử dụng giải pháp HTML 5 bằng cách đánh dấu các nút radio theo yêu cầu trong đánh dấu. Điều này sẽ loại bỏ sự cần thiết cho bất kỳ Javascript và để cho trình duyệt làm công việc cho bạn.

Xem HTML5: How to use the "required" attribute with a "radio" input field để biết thêm thông tin về cách thực hiện tốt điều này.

Nguồn

2016-06-29 16:16:34

<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data"> 

    <div class="text-input"> 
     <label>Gender: </label> 
     <input class="form-control" type="radio" name="gender" id="male" value="male" /> 
     <label for="male">Male</label> 
     <input class="form-control" type="radio" name="gender" id="female" value="female" /> 
     <label for="female">Female</label> 
    </div> 
    <div class="text-input" align="center"> 
     <input type="submit" name="register" value="Submit" onclick="return radioValidation();" /> 
    </div> 

</form> 

<script type="text/javascript"> 
    function radioValidation(){ 

     var gender = document.getElementsByName('gender'); 
     var genValue = false; 

     for(var i=0; i<gender.length;i++){ 
      if(gender[i].checked == true){ 
       genValue = true;  
      } 
     } 
     if(!genValue){ 
      alert("Please Choose the gender"); 
      return false; 
     } 

    } 
</script>

Nguồn: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

Nguồn

2016-11-14 11:44:40 Chandresh

Trả lời

Các vấn đề liên quan