How to send an ajax request inside a class function

Question

I need to verify my usernames and emails from the database and for that I need to send ajax requests. So far, for validations, I have done this

var handleRegister= function() {
$('.register-form').validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "",
            rules: {

                fullname: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                confirm_email:{
                    required: true,
                    equalTo: "#email",
                },
                address: {
                    required: true
                },
                city: {
                    required: true
                },
                country: {
                    required: true
                },

                username: {
                    required: true,

                },
                password: {
                    required: true
                },
                rpassword: {
                    equalTo: "#register_password"
                },

                tnc: {
                    required: true
                },
                day: {
                    required: true
                },
                year: {
                    required: true
                }
            },

            messages: { // custom messages for radio buttons and checkboxes
                tnc: {
                    required: "Please accept TNC first."
                }
            },

            invalidHandler: function(event, validator) { //display error alert on form submit   

            },

            highlight: function(element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group
            },

            success: function(label) {
                label.closest('.form-group').removeClass('has-error');
                label.remove();
            },

            errorPlacement: function(error, element) {
                if (element.attr("name") == "tnc") { // insert checkbox errors after the container                  
                    error.insertAfter($('#register_tnc_error'));
                } else if (element.closest('.input-icon').size() === 1) {
                    error.insertAfter(element.closest('.input-icon'));
                } else {
                    error.insertAfter(element);
                }
            },

            submitHandler: function(form) {
                form.submit();
            }
        });
}

I know how to send ajax request using Jquery, my question is how can I send the request and set the validations for these 2 fields in above function

username: {
                    required: true,

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

You may find this helpful: http://stackoverflow.com/questions/11469616/jquery-form-validation-before-ajax-submit — Captain Red, May 01 '16 at 02:16

score 1 · Answer 1 · answered May 01 '16 at 12:56

Looks like Validate library API doesn't support feature you need.

The only way to do it I can think about is simply do it manually, like

$('.email-field').on('blur', function(e) {
   var valueToValidate = e.target.value;
   $.get('/validate/email', {value: valueToValidate},function(data){
       if(data.result === false){
          $('.invalid-email').show();
       } else {
          $('.invalid-email').hide();
       }
   });
})

Longer way to do it (if you still need this feature) is to fork library sources, add feature by yourself and pull request it to main repository.

How to send an ajax request inside a class function

1 Answers1