Jump to content

Validation With Jquery Not Working

PHPLazy

By PHPLazy
in Javascript Help

 Share

Recommended Posts

PHPLazy Member

PHPLazy

Posted
Posted

Hello Friends,

 

I'm developing one website for real estate company, I'm using jquery validate plugin for that. But its not working.

 

Jquery Code (validate_property.js) :

  

$('document').ready(function() {
/* handle form validation */
$("#property-form").validate({
rules:
{
prop_title: {
required: true,
minlength: 15
},

prop_status: {
required: true
},
prop_type: {
required: true
},
prop_price: {
required: true,
number: true
},

prop_area: {
required: true
},

prop_rooms: {
required: true,
number: true
},

prop_address: {
required: true,
minlength: 50,
maxlength: 500
},

prop_message: {
required: true,
minlength: 30,
maxlength: 1000
},

prop_owner_name: {
required: true,
minlength: 3
},

prop_owner_email: {
required: true,
email: true
},

prop_owner_phone: {
required: true,
digits: true
}

},


messages:
{

prop_title:{
required: "Please enter property name",
minlength: "Property title must be atleast 15 characters"
},
prop_status: "Pleasse select the status of your property",
prop_type: "Please select the type of property",
prop_price:{
required: "Please enter the price of property",
number: "Price should be in digits"
},
prop_area: "Please enter the price of property",

prop_price:{
required: "Please enter the price of property",
number: "Price should be in digits"
},

prop_rooms:{
required: "Please enter the number of rooms",
number: "Rooms should be in digits"
},

prop_address:{
required: "Please enter the address of property",
minlength: "Address should be between 50 to 500 characters",
maxlength: "Address should be between 50 to 500 characters"
},

prop_message:{
required: "Please enter your message",
minlength: "Message should be between 30 to 1000 characters",
maxlength: "Message should be between 30 to 1000 characters"
},

prop_owner_name:{
required: "Please enter your name",
minlength: "Name should be atleast 3 characters"
},

prop_owner_email:{
required: "Please enter your email address",
email: "Please enter a valid email address"
},

prop_owner_phone:{
required: "Please enter your contact number",
number: "Please enter a valid contact number"
}

},

submitHandler: submitForm
});



/* handle form submit */
function submitForm() {
var data = $("#property_form").serialize();
$.ajax({
type : 'POST',
url : 'submit_property_data.php',
data : data,
beforeSend: function() {
$("#error").fadeOut();
$("#btn-submit").html('Sending ...');
},

success : function(response) {

if(response==1){
$("#error").fadeIn(1000, function(){
$("#error").html('Response 1');
});
}
else {
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span>   '+data+' !</div>');
$("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span>   Create Account');
});
}
}
});

return false;
}
});

 

HTML Form :

  

<?php
require_once("functions.php");
require_once("nav_header.php");

?>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"> </script>
<script src="js/validate_property.js"></script>


<!-- Sub banner start -->
<div class="sub-banner overview-bgi">
    <div class="overlay">
        <div class="container">
            <div class="breadcrumb-area">
                <h1>Submit Property</h1>

            </div>
        </div>
    </div>
</div>
<!-- Sub Banner end -->

<!-- Submit Property start -->
<div class="content-area-7 submit-property">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
    <div class="notification-box">
                    <div id="error" class="validate_msg"></div>
                </div>


            </div>
            <div class="col-md-12">
                <div class="submit-address">
                    <form name = "property_submit_form" method="post" id="property_form">
                        <div class="main-title-2">
                            <h1><span>Tell Me</span> Something About Your Property</h1>
                        </div>
                        <div class="search-contents-sidebar mb-30">
                            <div class="form-group">
                                <label>Property Title</label>
                                <input type="text" class="input-text" name="prop_title" placeholder="Property Title">
                                <span class="val_prop_title"></span>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select class="selectpicker search-fields" name="prop_status">
                                            <option value="Sale">For Sale</option>
                                            <option value="Rent">For Rent</option>
                                        </select>
                                        <span class="val_prop_status"></span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label>Type</label>
                                        <select class="selectpicker search-fields" name="prop_type">
                                            <option value="Modern">Modern</option>
                                            <option value="Traditional">Traditional</option>
                                            <option value="Arabic">Arabic</option>

                                        </select>
                                        <span class="val_prop_type"></span>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Price (Dirham)</label>
                                        <input type="text" class="input-text" name="prop_price" placeholder="AED">
                                        <span class="val_prop_price"></span>

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Area/Location</label>
                                        <input type="text" class="input-text" name="prop_area" placeholder="SqFt">
                                        <span class="val_prop_area"></span>

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Bed Rooms</label>
                                        <select class="selectpicker search-fields" name="prop_rooms">

                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>

                                        </select>
                                        <span class="val_prop_rooms"></span>

                                    </div>
                                </div>
                                <!-- <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Bathroom</label>
                                        <select class="selectpicker search-fields" name="1">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                        </select>
                                    </div>
                                </div> -->
                            </div>
                        </div>


                        <div class="main-title-2">
                            <h1><span>Location</span></h1>
                        </div>
                        <div class="row mb-30 ">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Address</label>
                                    <input type="text" class="input-text" name="prop_address"  placeholder="Address">
                                </div>
                                <span class="val_prop_address"></span>

                            </div>



                        </div>

                        <div class="main-title-2">
                            <h1><span>Detailed</span> Information</h1>
                        </div>

                        <div class="row mb-30">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Detailed Information</label>
                                    <textarea class="input-text" name="prop_message" placeholder="Detailed Information"></textarea>
                                </div>
                                <span class="val_prop_message"></span>
                            </div>
                        </div>
                        <!--<div class="row mb-30">
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Building Age <span>(optional)</span></label>
                                    <select class="selectpicker search-fields" name="years">
                                        <option>0-1 Years</option>
                                        <option>0-5 Years</option>
                                        <option>0-10 Years</option>
                                        <option>0-20 Years</option>
                                        <option>0-40 Years</option>
                                        <option>40+Years</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Bedrooms (optional)</label>
                                    <select class="selectpicker search-fields" name="1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Bathrooms (optional)</label>
                                    <select class="selectpicker search-fields" name="1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <label class="margin-t-10">Features (optional)</label>
                                <div class="row">
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox1" type="checkbox">
                                            <label for="checkbox1">
                                                Free Parking
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox2" type="checkbox">
                                            <label for="checkbox2">
                                                Air Condition
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox3" type="checkbox">
                                            <label for="checkbox3">
                                                Places to seat
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox4" type="checkbox">
                                            <label for="checkbox4">
                                                Swimming Pool
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox5" type="checkbox">
                                            <label for="checkbox5">
                                                Laundry Room
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox6" type="checkbox">
                                            <label for="checkbox6">
                                                Window Covering
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox7" type="checkbox">
                                            <label for="checkbox7">
                                                Central Heating
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox8" type="checkbox">
                                            <label for="checkbox8">
                                                Alarm
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                        <div class="main-title-2">
                            <h1><span>Contact</span> Details</h1>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" class="input-text" name="prop_owner_name" placeholder="Name">
                                    <span class="val_prop_owner_name"></span>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" class="input-text" name="prop_owner_email" placeholder="Email">
                                    <span class="val_prop_owner_email"></span>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input type="text" class="input-text" name="prop_owner_phone"  placeholder="Phone">
                                    <span class="val_prop_owner_phone"></span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" name="submit" id="btn-submit">
                                  <span class="btn button-sm button-theme">Submit</span>                                
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Submit Property end -->
<?php
require_once("nav_footer.php");
 ?>

 

Output :

The form is not validating with the jquery plugin, it just refreshing.

 

Please anybody here to help ?

 

Link to comment
https://forums.phpfreaks.com/topic/308771-validation-with-jquery-not-working/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.