这是我的jquery代码，用于检查表单中的错误。它包括长度检查或检查是否有任何字段为空。最后，它检查所有字段是否已填充并且是否具有预期长度。但是，虽然我保持所有字段都是空的并且尝试提交来自它并不限制表单提交。请帮忙。
$(document).ready(function(){
$('#title-error').hide();
$('#decription-error').hide();
$('#tags-error').hide();
$('#price-error').hide();
$('#name-error').hide();
$('#contact-error').hide();
$('#city-error').hide();
$('#address-error').hide();
$('#purpose-error').hide();
var pictureError = false;
var titleError = false;
var categoryError = false;
var subCategoryError = false;
var decriptionError = false;
var tagsError = false;
var nameError = false;
var contactError = false;
var cityError = false;
var addressError = false;
var purposeError = false;
var priceError = false;
$('#book-title').focusout(function(){
check_title();
});
$('#book-decription').focusout(function(){
check_decription();
});
$('#book-tags').focusout(function(){
check_tags();
});
$('#book-price').focusout(function(){
check_price();
});
$('#seller-name').focusout(function(){
check_name();
});
$('#seller-contact').focusout(function(){
check_contact();
});
$('#seller-city').focusout(function(){
check_city();
});
$('#seller-address').focusout(function(){
check_address();
});
function check_title(){
var titleLength = $('#book-title').val().length;
if(!titleLength){
$('#title-error').html("*Title can't be empty.")
$('#title-error').show();
var titleError = true;
}
else if(titleLength < 5 || titleLength > 100){
$('#title-error').html("*Should be between 5-100 characters");
$('#title-error').show();
var titleError = true;
}
else{
$('#title-error').hide();
}
}
function check_decription(){
var decriptionLength = $('#book-decription').val().length;
if(!decriptionLength){
$('#decription-error').html("*Decription can't be empty.");
$('#decription-error').show();
var decriptionError = true;
}
else{
$('#decription-error').hide();
}
}
function check_tags(){
var tagsLength = $('#book-tags').val().length;
if(!tagsLength){
$('#tags-error').html("*Please put some tags");
$('#tags-error').show();
var tagsError = true;
}
else{
$('#tags-error').hide();
}
}
function check_price(){
var priceLength = $('#book-price').val().length;
var price = $('#book-price').val();
if(!priceLength){
$('#price-error').html("*Price can't be empty");
$('#price-error').show();
var priceError = true;
}
else if(!price.match(/^\d+$/)) {
$('#price-error').html("*Price must contain digits");
$('#price-error').show();
var priceError = true;
}
else if(priceLength > 5){
$('#price-error').html("*Please put a reasonable price");
$('#price-error').show();
var priceError = true;
}
else{
$('#price-error').hide();
}
}
function check_name(){
var nameLength = $('#seller-name').val().length;
if(!nameLength){
$('#name-error').html("*Name can't be empty");
$('#name-error').show();
var nameError = true;
}
else if(nameLength > 50){
$('#name-error').html("*Should be less then 50 characters");
$('#name-error').show();
var nameError = true;
}
else{
$('#name-error').hide();
}
}
function check_contact(){
var contactLength = $('#seller-contact').val().length;
var phone = $('#seller-contact').val();
if(!contactLength){
$('#contact-error').html("*Contact can't be empty");
$('#contact-error').show();
var contactError = true;
}
else if(!phone.match(/^\d+$/)) {
$('#contact-error').html("*Contact must contain digits");
$('#contact-error').show();
var contactError = true;
}
else if(contactLength != 10){
$('#contact-error').html("*Contact must be 10 digits long");
$('#contact-error').show();
var contactError = true;
}
else{
$('#contact-error').hide();
}
}
function check_price(){
var priceLength = $('#book-price').val().length;
if(!priceLength){
$('#price-error').html("*Price can't be empty");
$('#price-error').show();
var priceError = true;
}
else if(priceLength > 5){
$('#price-error').html("*Please put a reasonable price");
$('#price-error').show();
var priceError = true;
}
else{
$('#price-error').hide();
}
}
function check_city(){
var cityLength = $('#seller-city').val().length;
if(!cityLength){
$('#city-error').html("*City can't be empty");
$('#city-error').show();
var cityError = true;
}
else{
$('#city-error').hide();
}
}
function check_address(){
var addressLength = $('#seller-address').val().length;
if(!addressLength){
$('#address-error').html("*Address can't be empty");
$('#address-error').show();
var addressError = true;
}
else{
$('#address-error').hide();
}
}
function check_purpose(){
var purposeLength = $('#book-purpose').val().length;
if(!purposeLength){
$('#purpose-error').html("*Please choose purpose of the ad");
$('#purpose-error').show();
var purposeError = true;
}
else{
$('#purpose-error').hide();
}
}
$('#book-post-form').submit(function(){
var titleError = false ;
var decriptionError = false ;
var tagsError = false ;
var nameError = false ;
var contactError = false ;
var cityError = false ;
var addressError = false ;
var purposeError = false ;
var priceError = false ;
check_title();
check_decription();
check_tags();
check_price();
check_name();
check_contact();
check_city();
check_address();
check_purpose();
if( titleError == false && decriptionError == false && tagsError == false && nameError == false && contactError == false && cityError == false && addressError == false && purposeError == false && priceError == false){
return true;
}
else{
return false;
}
});
});
这是我的HTML标记。
<form action="ad-post.php" method="POST" enctype="multipart/form-data" id="book-post-form" >
<span class="form-header">Pin a free ad</span>
<div class="ad-post-element">
<div id="croppic"></div>
<div class="action-primary" id="cropContainerHeaderButton" style="margin:10px 0px 10px 0px">Upload book photo</div>
<span class="error" id="picture-error">* Choose an appropriate title.</span>
<input type="text" name="book_image" id="myOutputId" style="visibility: hidden">
</div>
<div class="ad-post-element">
<label for="book-title">Title</label>
<input type="text" name="book-title" id="book-title">
<span>* Choose an appropriate title.</span>
<span class="error" id="title-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="book-isbn">ISBN</label>
<input type="text" name="book-isbn" id="book-isbn">
<span>* ISBN is optional and can be leave unfilled.</span>
</div>
<div class="ad-post-element">
<label for="book-category">Category</label>
<select name="book-category" id="book-category">
<option value="0" selected disabled>Select Category</option>
<?php
foreach($cat->getCat() as $cat){
$name = $cat->category_name;
echo "<option value=".$count.">".$name."</option>";
}
?>
</select>
<span class="error" id="category-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element" id="hide" style="display:none">
<label for="book-sub-category">Sub Category</label>
<select name="book-sub-category" id="book-sub-category">
<option selected disabled>Select Sub Category</option>
</select>
<span class="error" id="sub-category-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="book-purpose">Purpose</label>
<select name="book-purpose" id="book-purpose" required>
<option selected disabled>Purpose of ad</option>
<option value="resell">Resell</option>
<option value="donate">Donate</option>
</select>
<span class="error" id="purpose-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="book-decription">Decription</label>
<textarea name="book-decription" id="book-decription"></textarea>
<span>* Describe your book in few words</span>
<span class="error" id="decription-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="book-tags">Tags</label>
<textarea name="book-tags" id="book-tags"></textarea>
<span>* Put some tags separated by comma ( , )</span>
<span class="error" id="tags-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="book-price" required>Price</label>
<input type="text" name="book-price" id="book-price" >
<span class="error" id="price-error">* Choose an appropriate title.</span>
</div>
</div>
<div class="seller-info">
<span class="seller-header">Seller Details</span>
<div class="ad-post-element">
<label for="seller-name">Name</label>
<input type="text" name="seller-name" id="seller-name">
<span>* keep it real so that people can identify you</span>
<span class="error" id="name-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="seller-contact">Contact</label>
<input type="text" name="seller-contact" id="seller-contact">
<span>* keep it real so that people can contact you</span>
<span class="error" id="contact-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="seller-city">City</label>
<input type="text" name="seller-city" id="seller-city">
<span class="error" id="city-error">* Choose an appropriate title.</span>
</div>
<div class="ad-post-element">
<label for="seller-address">Address</label>
<textarea name="seller-address" id="seller-address"></textarea>
<span class="error" id="address-error">* Choose an appropriate title.</span>
</div>
</div>
<input type="submit" class="action-primary" style="margin:10px 0px 10px 0px" name="submit" value="Pin free Ad" id="submit">
</form>
答案 0 :(得分：0)
不要直接在提交函数中将值赋给变量，它们在提交函数中始终为false，因为您永远不会更改其值。您可以创建一个返回类型函数，然后将它们分配给提交函数中的变量。
在调用函数时，在submit函数中使用变量来获取返回类型
var TitleError = check_title();
check_title函数应该是
function check_title(){
var titleLength = $('#book-title').val().length;
if(!titleLength){
$('#title-error').html("*Title can't be empty.")
$('#title-error').show();
var titleError = true;
return true;
}
else if(titleLength < 5 || titleLength > 100){
$('#title-error').html("*Should be between 5-100 characters");
$('#title-error').show();
var titleError = true;
return true;
}
else{
$('#title-error').hide();
return false;
}
}
其他人也是如此