Question

所以我使用jQuery构建了这个表单验证，它在Chrome中完美运行，并且在IE和FF中失败了。在IE和FF中提交页面时，页面将继续加载。

我无法找到一个有价值的解释，为什么或如何解决它。任何建议都将非常感谢....

我还想知道如何使用jQuery规则验证复选框字段＆amp;消息，如果可能的话。在jQuery文档中找不到任何关于此的信息。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$("#successForm").validate({
    rules: {
        firstName: {
            required: true,
            minlength: 2,
        },
        lastName: {
            required: true,
            minlength: 2,
        },
        phoneNumber: {
            required: true,
            minlength: 10,
        },
        emailAddress: {
            required: true,
            email: true,
        },
        attachOne: {
            required: true,
            accept: "png|jpg|gif|jpeg|tif",
        },
        attachTwo: {
            required: true,
            accept: "png|jpg|gif|jpeg|tif",
        },
        termsAgree: {
            required: true,
            minlength: 1,
        },
    },
    messages: {
        firstName: {
            required: "Please enter your First Name.",
            minlength: jQuery.format("You need to use at least {0} characters for your first name."),
        },
        lastName: {
            required: "Please enter your Last Name.",
            minlength: jQuery.format("You need to use at least {0} characters for your last name"),
        },
        phoneNumber: {
            required: "Please enter your Phone Number.",
            minlength: jQuery.format("Please enter a valid phone number."),
    },
        emailAddress: {
            required: "Please enter your Email Address.",
            minlength: jQuery.format("Please enter a valid email address."),
        },
        dateOfBirth: {
            required: "Please enter your Date of Birth.",
            minlength: jQuery.format("Please enter the date in the format DD-MM-YYYY."),
    },
        termsAgree: "You must agree to the Terms and Conditions.",
    }
});
});
</script>

<style type="text/css">
input.error { border: 1px solid red; }
label.error {background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
label.valid {background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
display: block;
width: 16px;
height: 16px;
}
</style>



<form action="<?=$_SERVER['PHP_SELF'];?>" enctype="multipart/form-data"  id="successForm"><table style="padding: 6px;">
<tr>
<td><label for="firstName">First Name</label></td>
<td><input type="text" id="firstName" name="firstName" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($firstName));?>" /></td>
</tr>
<tr>
<td><label for="lastName">Last Name</label></td>
<td><input type="text" id="lastName" name="lastName" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($lastName));?>" /></td>
</tr>
<tr>
<td><label for="phoneNumber">Phone Number</label></td>
<td><input type="text" id="phoneNumber" name="phoneNumber" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($phoneNumber));?>" /></td>
</tr>
<tr>
<td><label for="emailAddress">Email Address</label></td>
<td><input type="text" id="emailAddress" name="emailAddress" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($emailAddress));?>" /></td>
</tr>
<tr>
<td><label for="dateOfBirth">Date of Birth</label></td>
<td><input type="text" id="dateOfBirth" name="dateOfBirth" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($dateOfBirth));?>" /></td>
</tr>
<tr>
<td><label for="successStory">Your Success Story</label></td>
<td><textarea id="successStory" name="successStory" cols="50" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2" style="margin-top:20px; margin-bottom: 5px; border: 1px solid #666; color:#666; width:300px;"><b>Please attach some photos of your success.</b><br /><span style="font-size:8pt;">Accepted File Types: jpg, jpeg, gif, png, tif<br />Maximum File Size: 2 megabytes</span>
<table style="border: 0px;">
<tr>
<td style="width:150px;"><label for="attachOne">Attachment 1</label></td>
<td><input type="file" id="attach[0]" name="attachOne" /></td>
</tr>
<tr>
<td style="width:150px;"><label for="attachOne">Attachment 2</label></td>
<td><input type="file" id="attach[1]" name="attachOne" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><label for="termsConditions">Terms & Conditions</label></td>
<td><textarea id="termsConditions" name="termsConditions" cols="50" rows="6">Terms and Conditions...</textarea></td>
</tr>
<tr>
<td><label for="termsAgree">&nbsp;</label></td>
<td><input type="checkbox" id="termsAgree" name="termsAgree" />I have read and agree to the Terms and Conditions.</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="submit" value="Validate!" /><input type="reset" value="Reset!" /></td>
</tr>
</table>
</form>

感谢您的帮助。不幸的是，这不起作用。我可能会误解你的代码，但这就是我所拥有的。

<script type="text/javascript">

function validateForm() {
        if ($(".required").valid() == 0) {
            alert("failed!");
            return false;
        }
        else {
            alert("success!");
            return true;
        }
}

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});

    $(document).ready(function(){
        $("#successForm").validate({
            rules: {
                firstName: {
                    required: true,
                    minlength: 2,
                },
                lastName: {
                    required: true,
                    minlength: 2,
                },
                phoneNumber: {
                    required: true,
                    minlength: 10,
                },
                emailAddress: {
                    required: true,
                    email: true,
                },
                attachOne: {
                    required: true,
                    accept: "png|jpg|gif|jpeg|tif",
                },
                attachTwo: {
                    required: true,
                    accept: "png|jpg|gif|jpeg|tif",
                },
                termsAgree: {
                    required: true,
                    minlength: 1,
                },
            },
            messages: {
                firstName: {
                    required: "Please enter your First Name.",
                    minlength: jQuery.format("You need to use at least {0} characters for your first name."),
                },
                lastName: {
                    required: "Please enter your Last Name.",
                    minlength: jQuery.format("You need to use at least {0} characters for your last name"),
                },
                phoneNumber: {
                    required: "Please enter your Phone Number.",
                    minlength: jQuery.format("Please enter a valid phone number."),
                },
                emailAddress: {
                    required: "Please enter your Email Address.",
                    minlength: jQuery.format("Please enter a valid email address."),
                },
                dateOfBirth: {
                    required: "Please enter your Date of Birth.",
                    minlength: jQuery.format("Please enter the date in the format DD-MM-YYYY."),
                },
                termsAgree: "You must agree to the Terms and Conditions.",
            }
        });
    });
</script>

我似乎没有在Chrome，FF或IE中显示警报。我试过onsubmit = from和onclick = from。两者都没有。

Answer 1

前几天我有同样的问题

jQuery Validation always returns true

通过做这样的事情我解决了;

function validateForm() {
        if ($(".required").valid() == 0)
            return false;
        else
            return true;
    }

我从提交按钮调用validateForm。

onclick="return validateForm()"

jQuery表单验证 - 跨浏览器兼容性

1 个答案: