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>