Form validation using jQuery in wordpress

Question

I have a form which consists of two dropdown fields.

<form action="" method="post" id="validation">

    <div>
        <input type="text" name="name">
    </div>
    <div>

    <select id="car" name="car">
      <option value="">Select....</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    </div>

    <div>
    <select id="fruit" name="fruit">
      <option value="">Select....</option>
      <option value="orange">Orange</option>
      <option value="papaya">Papaya</option>
      <option value="avacado">Avacado</option>
    </select>
    </div>
    <input type="submit" value="Purchase" id="submit">

</form>

I want to collect these information and perform some action but before I want to validate that. But I am not sure about where to place my validation code. This is my "ajax_js" file.

$(document).ready(function(){
    $('#submit').on('click', function(e){
    e.preventDefault();
    var car = $('#car').val();
    var fruit = $('#fruit').val();
    // I am applying validation here
    $('#validation').validate({
    rules: {
    car: {
       required: true
       },
    fruit: {
       required: true
       }  
     }
    }) 
   $.ajax({
     type: 'post',
     url: ajax_url, //I have defined this in fuctions.php
     data: { action: 'test', get_car: car, get_fruit: fruit},
     success: function(response){
     $('#insert').html(response);    
     }
   });   
   });

In functions.php, I have registered the jquery validation cdn....

function add_jQuery_libraries() {

    // Registering Scripts
     wp_register_script('google-hosted-jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false);

     wp_register_script('jquery-validation-plugin', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js', array('google-hosted-jquery'));

    // Enqueueing Scripts to the head section
    wp_enqueue_script('google-hosted-jquery');
    wp_enqueue_script('jquery-validation-plugin');
   }
add_action( 'wp_enqueue_scripts', 'add_jQuery_libraries' );

function ajax_js() {
    wp_enqueue_script( 'ajax_js', get_template_directory_uri() . '/assets/js/ajax.js', array( 'google-hosted-jquery', 'jquery-validation-plugin' ), null, true );
}

add_action( 'wp_enqueue_scripts', 'ajax_js' );

Please check this code, everything is working fine, but the problem is that either validation is working or ajax part is working. Please suggest me a good way to perform ajax as well as validation. Thanking you.

Now I want to clear the form. I have used the following code.

$.ajax({
         type: 'post',
         url: ajax_url, //I have defined this in fuctions.php
         data: { action: 'test', get_car: car, get_fruit: fruit},
         success: function(response){
         $('#car').val(""); //This reset the value but it does not reset the selected list
         //$('#car option:selected").removeAttr("selected");
         //$('#car :selected').removeAttr("selected");
         //$('#car').removeAttr('selected');
         //$('#car :selected').prop('selected', false);
         //$('#car :selected').remove(); //It removes the default value 
         $('#insert').html(response);    
         }
       });

you should use onsubmithandler

Vel
– Vel

2017-05-03 06:43:33 +00:00
Commented May 3, 2017 at 6:43 — Vel
– Vel, Commented May 3, 2017 at 6:43

Vel · Accepted Answer · 2017-05-03 06:53:26Z

7

try this

$(document).ready(function(){

        $('#validation').validate({
            rules: {
            car: {
               required: true
               },
            fruit: {
               required: true
               }  
             },
            submitHandler: function(form) {
                var car = $('#car').val();
                var fruit = $('#fruit').val();

                $.ajax({
                   url: ajax_url, 
                    type: "POST",             
                     data: { action: 'test', get_car: car, get_fruit: fruit},
                    cache: false,             
                    processData: false,      
                    success: function(data) {
                        $('#insert').html(response);    
                    }
                });
                return false;
            },
            // other options
        });

    });

working fiddle link

edited May 3, 2017 at 6:53

answered May 3, 2017 at 6:48

Vel

9,4286 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mohammad Umar Over a year ago

Thank you bro, It worked for me. I don't have enough reputation to upvote your answer. Thanks a lot.....

Mohammad Umar Over a year ago

After I acheive my results, I want to clear the selected fields but the problem is that selected item do reset to default selected like "Select.....", however values are cleared. I am using the following code..

Vel Over a year ago

what is the issue?

Mohammad Umar Over a year ago

$('#car').val(""); //I also tried some of options like but the selected fields do not set to default. success: function(data) { $('#car').val(""); $('#car option:selected').removeAttr("selected"); $('#insert').html(response); } });

Mohammad Umar Over a year ago

Thanks a lot bro, but I am using it in a project. It is not working simply. Even I tried a bunch of options from stackoverflow....but it not resetting the value( on front end), however it is reset logically.

|

Collectives™ on Stack Overflow

Form validation using jQuery in wordpress

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related