Nikhil Sindhu Nikhil Sindhu - 1 month ago 6
Javascript Question

Jquery form error checking not working

This is my jquery code to check error in my form. It includes length checking or checks if any field is empty. At last, it checks if all fields are filled and have intended length. But while I am keeping all fields empty and trying to submit the from It doesn't restrict the form to submit. Please help.

$(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;
}

});


});


Here is my HTML markup.

<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">&#42; 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>&#42; Choose an appropriate title.</span>
<span class="error" id="title-error">&#42; 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>&#42; 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">&#42; 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">&#42; 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">&#42; 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>&#42; Describe your book in few words</span>
<span class="error" id="decription-error">&#42; 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>&#42; Put some tags separated by comma ( , )</span>
<span class="error" id="tags-error">&#42; 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">&#42; 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>&#42; keep it real so that people can identify you</span>
<span class="error" id="name-error">&#42; 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>&#42; keep it real so that people can contact you</span>
<span class="error" id="contact-error">&#42; 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">&#42; 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">&#42; 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>

Answer

Dont assign the values to your variables directly in submit function, they will always be false in your submit function because you are never changing there values. you can make a return type function and then assign them to your variables in submit function.

In submit function when you are calling the function use the variable to get the return type

  var TitleError = check_title();

And the check_title function should be

    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;
    }

}

Same for others as well

Comments