添加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')，但实际上没有任何元素具有 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.