Form validation using jQuery and Ajax in PHP

I have a form which has education div with course, year of completion, university and percent fields, and I am validating those education div fields using Ajax in PHP, and thats working perfectly, but when I clone education div and then if there is any validation error in second (cloned education) div then it reflect it in first (education field).

this is the form: Educational Details

<!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="courses">Course Type</label> <div class="col-md-6"> <select class="form-control" name="course[]" id="course1[]" onblur="validate('course', this.value)"> <option value="0">--Select--</option> <option value="FullTime">FullTime</option> <option value="PartTime">PartTime</option> <option value="Distance Education">Distance Education</option> <option value="Executive">Executive</option> </select> </div> </div> <div id="course" class="text-center course"></div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="year">Year of Completion</label> <div class="col-md-6"> <select class="form-control" name="year[]" id="year1[]" onblur="validate('year', this.value)"> <?php require('layout/educompletionyear.php'); ?> </select> </div> </div> <div id="year" class="text-center"></div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 label_usity control-label" for="university">University/Institute</label> <div class="col-md-6"> <select class="form-control" name="university[]" id="university1[]" onblur="validate('university', this.value)"> <?php require('layout/institute.php'); ?> </select> </div> </div> <div id="university" class="text-center"></div> </fieldset> </div> <div class="col-md-6"> <fieldset> <!-- Text input--> <div class="form-group"> <label class="col-md-4 label_degree control-label" for="degree">Degree</label> <div class="col-md-6"> <select class="form-control" name="degree[]" id="degree1[]" onblur="validate('degree', this.value)"> <?php require('layout/degree.php'); ?> </select> </div> </div> <div id="degree" class="text-center"></div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 label_Grade control-label" for="grade">Grade</label> <div class="col-md-6"> <select class="form-control" name="grade[]" id="grade1[]" onblur="validate('grade', this.value)" > <option value="-1">--Select--</option> <option value="A">A</option> <option value="A+">A+</option> <option value="B">B</option> <option value="B+">B+</option> <option value="C">C</option> <option value="C+">C+</option> <option value="D">D</option> <option value="D+">D+</option> <option value="E">E</option> <option value="E+">E+</option> <option value="F">F</option> <option value="F+">F+</option> </select> </div> </div> <div id="grade" class="text-center"></div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="percentage">Percentage</label> <div class="col-md-6"> <input id="percentage1[]" name="percentage[]" onblur="validate('percentage', this.value)" type="text" placeholder="Percentage" class="input_percentage form-control input-md"> </div> </div> <div id="percentage[]" class="text-center"></div> </fieldset> </div> <a class="close" data-dismiss="alert" style="padding-right: 37px;opacity: 1;"><button type="button" class="addbtn btn btn-danger">Remove</button></a> </div>

this is the ajax validation:

<?php $value = $_GET['query']; $formfield = $_GET['field']; //EDUCATION PART // Check Valid or Invalid Course type when user enters Course in select option input field. if ($formfield == "course") { if ($value =="0") { echo "Please select Prefered location."; }else{ } } // Check Valid or Invalid year when user enters Year of completion in select option input field. if ($formfield == "year") { if ($value =="-1") { echo "Please select Year of completion."; }else{ } } // Check Valid or Invalid University type when user enters University in select option input field. if ($formfield == "university") { if ($value =="-1") { echo "Please select University."; }else{ } } // Check Valid or Invalid Degree when user enters Degree in select option input field. if ($formfield == "degree") { if ($value =="-1") { echo "Please select Degree."; }else{ } } // Check Valid or Invalid Grade when user enters Grade in select option input field. if ($formfield == "grade") { if ($value =="-1") { echo "Please select Grades."; }else{ } } // Check Valid or Invalid Persentage when user enters Persentage in lastname input field. if ($formfield == "percentage") { if (strlen($value) ==0) { echo "Please enter your Persentage."; }elseif (!preg_match("/^((0|[1-9]\d?)(\.\d{1,2})?|100(\.00?)?)$/",$value)) { echo "Only enter valid persentage"; }else { } } ?>

Please help to resolve cloned div validation messages part.


Use Jquery validate built-in library to validate forms very easily.

I got the way of implementing this....

i am creating an array of error message showing div and then i am also creating one more array for input fields attribut onblur

<div id="percentage[1]" class="text-center percentage"></div>

onblur="validate('percentage[1]', this.value)"

using jquery.

$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#entry1').clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value

newElem.find('.percentage').attr('id', 'percentage[' + newNum + ']');

newElem.find('.input_percentage').attr('onblur', 'validate("percentage[' + newNum + ']", this.value)');

and then i am validating these fields in ajjax page.

thank you for helping me...

Category:php Time:2018-12-21 Views:4

Related post

  • How to instantly display data after form submission using jQuery and AJAX? 2011-11-19

    I have a PHP form that uses jQuery/AJAX to submit data into a MySQL database table. Currently, I have a message display saying " Done!" once the form is submitted, but would like the actual data to instantly display after it has been submitted. I hav

  • Validation problems when using jQuery and Ajax to post back form in partial view 2011-10-03

    I am having some challenges with validation in my ASP.NET MVC3 project when using jQuery and AJAX to post back data from a partial view. Adding validation to the NoteText field within my partial view results in "$('#noteAdd').submit" event failing to

  • Form validation with jQuery and php 2010-06-29

    I have a form which I'm validating using jQuery and php. So basically if the php echoes "input must be filled" the jQuery should put a red border around that input, but the thing works only after submitting the form two times. I explain: if I submit

  • how to get a div and its content from a php file using jquery and ajax? 2011-12-04

    how to get a div and its content from a php file using jquery and ajax? For example, php file echo "<div class='test1WrapperDiv'>"; echo "<div><p> Row 1 </p></div>"; echo "<div><p> Row 2 </p></div

  • Performing both client side and server side validation using jQuery and CodeIgniter 2010-03-13

    What is the right way of doing both client side and server side validation using jQuery and CodeIgniter? I am using the jQuery form plugin for form submit. I would like to use jQuery validation plugin ( for c

  • Adding items to a collection on a ASP.NET MVC site using jQuery and AJAX 2010-11-17

    I'm creating a UX experience that will allow the user to add items to a collection by using a jQuery button, and some AJAX. My problem is, when the user finishes adding items and filling out the rest of the form, they complete the form, which I want

  • Using Jquery and Ajax to save a file in ASP.Net 2010-06-24

    I have a button that uses jquery and ajax to call a server side script to create a text file and sends back the following response Response.ContentType = "csv"; Response.AddHeader("Content-disposition", "attachment; filename=" + fName); Response.Cont

  • How to add custom form validation using Jquery Validation Plugin for multiselect input? 2011-04-27

    I need to create a custom jquery form validation using Jquery Validation Plugin where the multiselect option has following kind of values: Code1(A) Code2(A) Code3(B) Code4(C) Code5(A) Code6(B) Code7(C) <select id="code_ids" multiple="multiple" nam

  • Response from Server using Jquery and Ajax 2012-03-24

    im having a problem with getting any response from my server using Jquery and Ajax. Server side: $data = strtotime("now"); echo $data; // $data Client side: html code... <script type="text/javascript" src=".../modjpicker2.js"></script>

  • Dynamic Collection Select in Rails using jQuery and AJAX 2011-08-04

    I have a simple application, in which I allow users to create posts. In order to create a post, users need to select a category. I want to use a collection select to show the category. When a user selects a category, I need to show another collection

  • Rebinding functions on dynamic content using jQuery and AJAX 2009-02-03

    I'm in the process of building a back-end admin panel for a site and I'm having an issue with the jQuery and AJAX code is use to build the page. On load, I bind actions to certain table fields allowing users to add or delete a colour or size. When th

  • IE error when using jQuery and Ajax 2011-12-26

    So I am very new to using jQuery and I have a script that updates posts on a page when load more is clicked. It works fine in Chrome and Firefox but nothing happens in IE. Does anyone know why? jQuery Script function get(){ $("#acomment").empty().htm

  • Check username availability using jquery and Ajax in rails 2011-12-29

    I am using rails with jquery and ajax to check the availability of username. I am using the following plugin for jquery validation purpose. In my controller i am using the following method to ch

  • How to use jQuery and Ajax to return just one string and how to insert it to a DDL in a jdialog? 2010-10-02

    I'm trying to create a dynamic module where I drop an object on screen. Then a jQuery dialog opens with three drop-down lists. When I select a value in the first drop-down list I'm trying to filter the results in the next list via Ajax. This is my JS

  • Form validation with jQuery and Codeigniter? 2011-05-27

    Is there any tutorial or other helpful resource to create form validation with jQuery using Codeigniter 2.0.2 I have been searching but didnt find any. As I've just started learning Codeigniter, I'd prefer to have some helpful tutorial or any resourc

  • How to remove all style attributes using jquery and also in PHP? 2011-06-06

    Possible Duplicates: php regexp: remove all attributes from an html tag Remove style attribute from HTML tags EDITED: For example i am having the following content: <div style="text-indent: -76.5pt; margin: 0in 54.9pt 0pt 76.5pt;"><strong

  • Form validation using jQuery-Ajax 2011-03-09

    When it comes to normal POST, GET methods, I usually know my way around. However, implementing ajax-jQuery into my code to make form validation is proving a huge step for me to learn. I have a form that has 3 fields: email, confirm email, and passwor

  • Login form validation using javascript and php 2010-05-23

    I have been trying to create a login form using JavaScript. My login form needs to do the following using JavaScript validation login field contains only letters with a minimum of 4 and a maximum of 6 letters password is at least 5 characters long an

  • Cross-domain PHP calls using jQuery and AJAX 2010-06-20

    I have a problem where the server I'm using is not configured to allow PHP or CGI and I need to send a mail using variables received from a form on this server to the owner, like a general enquiry/feedback form. Does anyone know how I can call a simp

Copyright (C), All Rights Reserved.

processed in 0.780 (s). 13 q(s)