提交表单时,验证html复选框并显示javascript警告(如果未选中)

时间:2015-07-13 18:13:53

标签: jquery wordpress validation contact-form-7

我尝试使用jQuery和可能的jQuery验证插件验证HTML中的表单。我想要发生的是当按下提交按钮时,它应该验证是否选中了某个HTML复选框。如果没有选中,我想发出一个javascript警告错误,说它没有被选中。否则表格应正常提交。我试图将其整合到使用Contact Form 7插件创建的WordPress表单中。

我已根据请求添加了我的代码。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head>
<body>
<form id="myForm" action="action.php" method="post"> 
<input type="checkbox" name="tos" value="Agreed to TOS" id="confirm">
<input type="submit" value="Submit Comment" /> 
</form>
</body>
</html>

没有多少,但我正在尝试使用jquery验证。使用javascript可能很简单。

2 个答案:

答案 0 :(得分:0)

如果

<input id="submit" type ="submit" name ="submit" />

是表单中的提交按钮,向其添加onclick

<input id="submit" type ="submit" name ="submit" oncLick = "return validate();">

您的验证应如下所示:

function validate(){
  if your checkbox is set
       return true;
  else
       return false;
}

如果您的validate函数返回true,则只会提交您的表单。

答案 1 :(得分:0)

var atleast = 1;
function validate() {
    debugger;
    var CHK = document.getElementById("<%=chk1");
    var checkbox = document.getElementsByTagName("input");
    var counter = 0;
    for (var i = 0; i < checkbox.length; i++) {
        if (checkbox[i].checked) {
            counter++;
        }
    }
    if (atleast > counter) {
        alert("Please select atleast " + atleast + " employee ");
        return false;
    }
    return true;
}

//给予

enter code here 

对于DEMO

http://design.ionxindia.com/Manager/AttendanceRequest