jQuery 폼 유효성 검사에서 라디오 옵션이 왜 이렇게 동작합니까?

Question

라디오 메뉴에 아래의 코드를 사용했는데 상자를 확인하지 않으면 양식이 성공적으로 전송됩니다.하지만 옵션을 선택하고 제출을 클릭하면 '하나 선택'오류가 표시됩니다. 그것은 내가 필요로하는 것과 정반대의 역할을합니다. 모든 의견은 크게 짝을 주시면 감사하겠습니다 - 감사 :

HTML :

<div> 
<label for="contact_radio" <="" label=""> 
<input type="radio" id="contact_radio" name="radio">Keen to join</input> 
<label for="contact_radio" <="" label=""> 
<input type="radio" id="contact_radio" name="radio">Already a member</input> 
Select one 
</div> 

jQuery를 : 라디오 입력

$('input[name="radio"]').on('change', function() { 
var selected_input=$('input[name="radio"]:checked'); 
var is_myradio=re.test(input.val()); 
if(is_myradio){input.removeClass("invalid").addClass("valid");} 
else{input.removeClass("valid").addClass("invalid");} 
}); 

Answer 1

없음 값 속성이 없다, 그래서 당신은이를 추가해야합니다. 당신도 내가 속성을 복제해야하지 않아야하지만, 여기에 문제가 발생하지는 않습니다.

Answer 2

input.val()에 입력되는 내용은 무엇입니까? if 조건은 입력 값을 검사하고 regex와 비교하여 그에 따라 클래스를 추가하는 것입니다. 당신이 항목을 선택하거나하지 여부에 따라하지 대신이 사용

$('input[name="radio"]').on('change', function() { 
    var input = $('#your_input'); 
    var selected_input=$("input[name='name']).is(":checked"); 
    var is_input_validated=re.test(input.val()); 
    if(is_input_validated && selected_input) { 
     input.removeClass("invalid").addClass("valid"); 
    } 
    else{ 
     input.removeClass("valid").addClass("invalid"); 
    } 
}); 

Answer 3

$(document).ready(function() { 
 

 
\t // Name can't be blank 
 
$('#contact_name').on('input', function() { 
 
\t var input=$(this); 
 
\t var re = /^.{2,}$/; 
 
\t var is_name=re.test(input.val()); 
 
\t if(is_name){input.removeClass("invalid").addClass("valid");} 
 
\t else{input.removeClass("valid").addClass("invalid");} 
 

 
}); 
 

 
// Phone number must be more than 2 digits 
 
$('#contact_phone').on('input', function() { 
 
\t var input=$(this); 
 
\t var re = /^.{2,}$/; 
 
\t var is_phone=re.test(input.val()); 
 
\t if(is_phone){input.removeClass("invalid").addClass("valid");} 
 
\t else{input.removeClass("valid").addClass("invalid");} 
 

 
}); 
 

 
// Email must be an email 
 
$('#contact_email').on('input', function() { 
 
\t var input=$(this); 
 
\t var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; 
 
\t var is_email=re.test(input.val()); 
 
\t if(is_email){input.removeClass("invalid").addClass("valid");} 
 
\t else{input.removeClass("valid").addClass("invalid");} 
 
}); 
 

 
// Message can't be blank 
 
$('#contact_message').keyup(function(event) { 
 
\t var input=$(this); 
 
\t var message=$(this).val(); 
 
\t console.log(message); 
 
\t if(message){input.removeClass("invalid").addClass("valid");} 
 
\t else{input.removeClass("valid").addClass("invalid");} \t 
 
}); 
 

 
// Must select an age 
 
$('input[name="contact_age"]').on('change', function() { 
 
    var input = $('#contact_age'); 
 
    var selected_input=$("input[name='select']").is(":checked"); 
 
    var is_input_validated=re.test(input.val()); 
 
    if(is_input_validated && selected_input) { 
 
     input.removeClass("invalid").addClass("valid"); 
 
    } 
 
    else{ 
 
     input.removeClass("valid").addClass("invalid"); 
 
    } 
 
}); 
 

 

 
// Must click a check box 
 
$('input[name="radio"]').on('change', function() { 
 
\t /* >>>>>>>>>>>>>>>>>> */ 
 
\t /* removed the entire validation from here since 
 
     once one radio button is selected, a button in 
 
     the button group will always be selected and can't 
 
     be un selected, so no point validating 
 
\t */ 
 
    $(this).parents('div').find('.error').hide(); 
 
}); 
 

 

 
// After Form Submitted Validation 
 
$("#contact_submit button").click(function(event){ 
 
\t var form_data=$("#contact").serializeArray(); 
 
\t var error_free=true; 
 
\t for (var input in form_data){ 
 
\t \t var element=$("#contact_"+form_data[input]['name']); 
 
\t \t var valid=element.hasClass("valid"); 
 
\t \t var error_element=$("span", element.parent()); 
 
\t \t if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;} 
 
\t \t else{error_element.removeClass("error_show").addClass("error");} 
 
\t } 
 
\t if(!$("input[name='radio']").is(":checked")){ 
 
\t \t $("input[name='radio']").parents('div').find('.error').show(); 
 
\t } 
 

 

 
\t if (!error_free){ 
 
\t \t event.preventDefault(); 
 
\t } 
 
\t else{ 
 
\t \t alert('Form submitted!'); 
 
\t } 
 
}); 
 

 

 
});

html { 
 
    background-image: url("images/footballField.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    font-family: arial; 
 
} 
 
#contact { 
 
    background-color: lightgray; 
 
    width: 900px; 
 
    padding: 15px; 
 
    border-radius: 6px; 
 
    height: 600px; 
 
} 
 
#contact label { 
 
    display: inline-block; 
 
    width: 80px; 
 
    text-align: left; 
 
    font-size: 14px; 
 
} 
 
#contact_submit { 
 
    padding-left: 100px; 
 
} 
 
#contact div { 
 
    margin-top: 1em; 
 
} 
 
#select { 
 
    font-size: 14px; 
 
} 
 
input[type="radio"] { 
 
    font-size: 12px; 
 
    float: left; 
 
    margin-right: 200px; 
 
} 
 
textarea { 
 
    vertical-align: top; 
 
    height: 5em; 
 
    border-radius: 6px; 
 
    border-color: lightgray; 
 
} 
 
.error { 
 
    display: none; 
 
    margin-left: 10px; 
 
} 
 
.error_show { 
 
    color: red; 
 
    margin-left: 10px; 
 
    font-size: 9px; 
 
} 
 
input.invalid, 
 
textarea.invalid { 
 
    border: 2px solid red; 
 
} 
 
input.valid, 
 
textarea.valid { 
 
    border: 2px solid green; 
 
} 
 
#form { 
 
    padding-left: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<form id="contact" method="post" action=""> 
 
    <!-- Name --> 
 
    <div> 
 
     <label for="contact_name">Name:</label> 
 
     <input type="text" id="contact_name" name="name"></input> 
 
     <span class="error">Your name is required</span> 
 
    </div> 
 
    <!--Phone --> 
 
    <div> 
 
     <label for="contact_phone">Phone:</label> 
 
     <input type="phone" id="contact_phone" name="phone"></input> 
 
     <span class="error">A valid number is required</span> \t \t \t \t \t \t \t \t 
 
    </div> 
 
    <!-- Email --> 
 
    <div> 
 
     <label for="contact_email">Email:</label> 
 
     <input type="email" id="contact_email" name="email"></input> 
 
     <span class="error">A valid email address is required</span> \t \t \t \t 
 
    </div> 
 
    <!-- Age Group --> 
 
    <div> 
 
     <label for="contact_age"</label> 
 
     <tr> 
 
      <td>Age group:&emsp; 
 
     </tr> 
 
     <td> 
 
      <select name="Age groups" > 
 
       <option value="select"></option> 
 
       <option value="2">Adults</option> 
 
       <option value="3" >U12's</option> 
 
       <option value="4" >U6's</option> 
 
      </select> 
 
     </td> 
 
     </td></tr></p> 
 
    </div> 
 
    <!-- Member intentions --> 
 
    <div> 
 
     <!-- >>>>>>>>>>>>>>>>>>>> CORRECTED YOUR LABELS --> 
 
     <label for="contact_radio1"><input type="radio" id="contact_radio1" name="radio">Keen to join Oaktown FC</input></label> 
 
     <label for="contact_radio2"><input type="radio" id="contact_radio2" name="radio">Already a member</input></label> 
 
     <span class="error">Select one</span> 
 
    </div> 
 
    <!-- Message --> 
 
    <div> 
 
     <label for="contact_message">Message:</label> 
 
     <textarea id="contact_message" name="message"></textarea> 
 
     <span class="error">This field is required</span> \t \t \t \t \t \t \t \t \t \t \t \t 
 
    </div> 
 
    <!-- Submit Button --> 
 
    <div id="contact_submit"> \t \t \t \t 
 
     <button type="submit">Submit</button> 
 
    </div> 
 
</form>