添加jQuery的表單驗證Javascript？

Question

如何添加在線驗證，以確保無線輸入的選擇，必須選擇

<script type="text/javascript"> 
    function choosePage() { 
     if(document.getElementById('weightloss').form1_option1.checked) { 
      window.location.replace("http://google.com/"); 
     } 
     if(document.getElementById('weightloss').form1_option2.checked) { 
      window.location.replace("http://yahoo.com/"); 
     } 
    } 
</script> 

<form id="weightloss"> 
    <input type="radio" id="form1_option1" name="weight-loss" value="5_day" class="plan"> 
    <label for="form1_option1"> 5 Day - All Inclusive Price</label><br> 
    <input type="radio" id="form1_option2" name="weight-loss" value="7_day"> 
    <label for="form1_option2"> 7 Day - All Inclusive Price</label><br> 
    <input type="button" value="Place Order" alt="Submit button" class="orange_btn" onclick="choosePage()"> 
</form> 

Answer 1

您使用document.getElementById('weightloss')但INFACT沒有具有ID 'weightloss'任何元素。

嘗試用這種

<script type="text/javascript"> 
    function choosePage() { 
     if(document.getElementById('form1_option1').checked) { 
      window.location.replace("http://google.com/"); 
     } 
     if(document.getElementById('form1_option2').checked) { 
      window.location.replace("http://yahoo.com/"); 
     } 
    } 
</script> 

希望它會幫助你。

Answer 2

你只需要讓js先評估表單。

<script type="text/javascript"> 
    function choosePage() { 
     if(document.forms["weightloss"]["form1_option1"].checked == true) { 
      window.location.replace("http://google.com/"); 
     } 
     if(document.forms["weightloss"]["form1_option2"].checked == true) { 
      window.location.replace("http://yahoo.com/"); 
     } 
     else { alert('Please choose an option'); } // for inline alerts see below. 
    } 
</script> 

對嵌入式文本提示請嘗試以下操作：

else { my_message.innerHTML = "Please choose an option" } 

的元素添加到您的網頁包含消息：

<p id="my_message"></p> <!-- when the form submits empty your message will appear here.