几个Javascript表单验证问题_Javascript_Forms_Onclick_Submit

几个Javascript表单验证问题

javascript forms

几个Javascript表单验证问题,javascript,forms,onclick,submit,Javascript,Forms,Onclick,Submit,我试图让Javascript检查必填字段，这些字段是：姓名、电话号码，至少选中一个复选框，如果下拉菜单处于“其他”状态，则需要填写附加信息字段。如果用户没有输入姓名和电话号码字段，我已经能够找出如何显示弹出窗口，但我的问题是：如果用户未填写附加信息框，则我无法显示弹出窗口，具体取决于下拉菜单是否设置为“其他”，如果未选中复选框，我也无法显示弹出窗口，最后，即使填写了所需字段，它仍会给我一条弹出错误消息。。有什么建议吗 <script> var userInp

我试图让Javascript检查必填字段，这些字段是：姓名、电话号码，至少选中一个复选框，如果下拉菜单处于“其他”状态，则需要填写附加信息字段。如果用户没有输入姓名和电话号码字段，我已经能够找出如何显示弹出窗口，但我的问题是：

如果用户未填写附加信息框，则我无法显示弹出窗口，具体取决于下拉菜单是否设置为“其他”，如果未选中复选框，我也无法显示弹出窗口，最后，即使填写了所需字段，它仍会给我一条弹出错误消息。。有什么建议吗

    <script>
        var userInput = document.getElementById("text").value;
        var userPhone = document.getElementById("phone").value;
        var dropDownBox =  document.getElementById("dropdown").value;
        var addInfo =  document.getElementById("textarea").value;
        var otherOne =  document.getElementById("oOther").value;
        var checkBoxCheck = document.getElementById("checkers").checked;
        function checking(){
        if(userInput === undefined){
        alert("Please fill in your name.");
        }
        if(userPhone === undefined){
        alert("Please fill in your phone number.");
        return false;
        } else{
        return true; 
        }
        if(dropDownBox === "Other"){
            if(addInfo === undefined){
            alert("Please fill in your additional information.")
            }
        }
        if(checkBoxCheck===undefined){
        alert("Please select a day of the week to contact you.");
         } 
        }

    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="page-header">
            <table border="1" width="100%" Frame="below">
                <thead>
                    <h1 style="color:purple" align="center"><span>C</span>aFe 80's</h1>
                </thead>    
            </table>
        </div>  
        <table border="0" width="20%" cellspacing="20">
            <ul class="list-inline nav nav-tabs">
                <li><a href="Lab-9CSSHomePageV6.html"><span class="glyphicon glyphicon-home"></span></a></li>
                <li><a href="Lab-9CSSMenuPageV6.html">Menu</a></li>
                <li class="active"><a href="Lab-9CSSContactPageV6.html">Contact Us</a></li>
            </ul>
        </table>    
    </div>  
    <div class="container" style= "height: 700px; position: relative; top: 60px">   
        <form  action="lab-9CSSContactPageV6.html" method="POST">
            <div class="form-group">
                <label for="text">Name:</label>
                <input type="text" class="form-control" id="text">
            </div>
            <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email">
            </div>
            <div class="form-group">
                <label for="phone">Phone Number:</label>
                <input type="phone" class="form-control" id="phone">
            </div>  
            <div class="form-group">
                <label for="dropdown">Reason for Inquiry:</label>
                <select class="form-control" id="dropdown">
                    <option>Catering</option>
                    <option>Private Party</option>
                    <option>Feedback</option>
                    <option id="oOther">Other</option>
                </select>   
            </div>  
            <div class="form-group">
                <label for="textarea">Addition Imformation:</label>
                <textarea class="form-control" rows="5" id="textarea"></textarea>
            </div>  
            <div class="form-group" style="position:relative; right: 40px">
                <div class="radio-inline">
                    <label class="radio-inline">Have you been to the restaurant?</label>
                    <label class="radio-inline"><input type="radio" name="rad" checked>No</label>
                    <label class="radio-inline"><input type="radio" name="rad">Yes</label>
                </div>  
            </div>
            <div class="form-group" style="position:relative; right: 40px">
                <div class="checkbox-inline">
                    <label class="checkbox-inline">Best days to contact you:</label>
                    <label class="checkbox-inline"><input id="checkers" type="checkbox" value="">M</label>
                    <label class="checkbox-inline"><input id="checkers" type="checkbox" value="">T</label>  
                    <label class="checkbox-inline"><input id="checkers" type="checkbox" value="">W</label>
                    <label class="checkbox-inline"><input id="checkers" type="checkbox" value="">TH</label>
                    <label class="checkbox-inline"><input id="checkers" type="checkbox" value="">F</label>
                </div>
            </div>  
            <div class="form-group" align="center">
                <button onclick="return checking()"type="submit" class="btn btn-default">Send Request</button>
            </div>      
        </form>     
    </div>


var userInput=document.getElementById（“text”）.value；
var userPhone=document.getElementById（“电话”）.value；
var dropDownBox=document.getElementById（“dropdown”）.value；
var addInfo=document.getElementById（“textarea”）.value；
var otherOne=document.getElementById（“oOther”）.value；
var checkBoxCheck=document.getElementById（“checkers”）.checked；
函数检查（）{
if（userInput==未定义）{
提醒（“请填写您的姓名”）；
}
如果（用户电话===未定义）{
提醒（“请填写您的电话号码”）；
返回false；
}否则{
返回true；
}
如果（下拉框==“其他”）{
如果（addInfo==未定义）{
提醒（“请填写您的其他信息。”）
}
}
如果（checkBoxCheck==未定义）{
提醒（“请选择一周中的某一天与您联系。”）；
} 
}
80年代咖啡馆





姓名：
电邮地址：
电话号码：
查询原因：
餐饮
私人聚会
反馈
其他
附加信息：
你去过餐馆吗？
不
对
与您联系的最佳时间：
M
T
W
真实航向
F
发送请求

我知道你已经猜出了问题的第一部分，我正在回答第二部分。如果你需要第一部分，请告诉我

我修改了您的下拉列表，使其具有值

<select class="form-control" id="dropdown">
                    <option value="1">Catering</option>
                    <option value="2">Private Party</option>
                    <option value="3">Feedback</option>
                    <option value="4">Other</option>
                </select>

对于日间部分，以下是代码：

if(document.getElementById("checkers1").checked===true||
        document.getElementById("checkers2").checked===true||
        document.getElementById("checkers3").checked===true||
        document.getElementById("checkers4").checked===true||
        document.getElementById("checkers5").checked===true){

             return true;
         } 
            else{
                alert("Please select a day");
                return false;
            }

HTML

 <label class="checkbox-inline"><input id="checkers1" type="checkbox" value="">M</label>
                       <label class="checkbox-inline"><input id="checkers2" type="checkbox" value="">T</label>
                    <label class="checkbox-inline"><input id="checkers3" type="checkbox" value="">W</label>
                    <label class="checkbox-inline"><input id="checkers4" type="checkbox" value="">T</label>
                    <label class="checkbox-inline"><input id="checkers5" type="checkbox" value="">F</label>

M
T
W
T
F

在

checking（）的开头移动前6条语句以从DOM中获取值。

尝试了这一点，现在页面根本没有响应。因此我能够找出姓名、电话号码和复选框字段，如果用户没有根据下拉菜单是否设置为“其他”来填写附加信息框，则弹出窗口很难显示。谢谢回答Satej，我能够找到下拉框，现在我遇到的问题是复选框，我用上述代码设置它的方式，如果只选中“星期一”框，则表单将提交，但如果选中任何其他框，则仍会显示弹出的错误消息。如果选中任何框，我希望表单提交。有什么想法吗？@shawn，请检查答案，我已经更新了你下拉部分的答案。基本上，即使选择了1天，事情也会过去，否则会显示警报。

 <label class="checkbox-inline"><input id="checkers1" type="checkbox" value="">M</label>
                       <label class="checkbox-inline"><input id="checkers2" type="checkbox" value="">T</label>
                    <label class="checkbox-inline"><input id="checkers3" type="checkbox" value="">W</label>
                    <label class="checkbox-inline"><input id="checkers4" type="checkbox" value="">T</label>
                    <label class="checkbox-inline"><input id="checkers5" type="checkbox" value="">F</label>