CODEWITHSUNDEEP
validationjqueryjquery-validate
Neel
Neel

Reputation: 625

field validation - both server and client side

I have form where a particular field requires both server side and client side validation. I am using jquery validation plugin to perform the client side validation. below is the code for same.

$('#createapp').validate({
    rules: {
      appname: {
        minlength: 8,
        required: true
      },
      apptitle: {
        required: true
      }
    },
    highlight: function(label) {
        $(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label
            .text('OK!').addClass('valid')
            .closest('.control-group').addClass('success');
    }
  });

Now I need to check if the appname that user is trying to enter already exists in DB or not. I am using ajax to perform the check using this code

$('#appname').focusout(function(){
    $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>index.php/app/application/check_app",
        data: "appname="+$("#appname").val(),
        success: function(msg){

            if(msg == "false")
            {
               var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('error');
                   controlDiv.removeClass('success');
            }
            else
            {
                var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('success');
                   controlDiv.removeClass('error');
            }
        }
    });
});

Although this makes the field control red but it doesn't stop the form submission. I don't want to replicate the logic on server side to check and return error.

What and where can I add code to disable form submission if app name is already taken??

please help

Upvotes: 0

Views: 984

Answers (3)

lbstr
lbstr

Reputation: 2832

I'm guessing that #createapp is your form? If so, I alter the submit attribute if the name is already taken.

$('#appname').focusout(function(){
    $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>index.php/app/application/check_app",
        data: "appname="+$("#appname").val(),
        success: function(msg){

            if(msg == "false")
            {
               var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('error');
                   controlDiv.removeClass('success');
               $('#createapp').attr('submit', 'return false;');
            }
            else
            {
                var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('success');
                   controlDiv.removeClass('error');
            }
        }
    });
});

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68420

I might be missing something but I think you're taking the wrong approach. jQuery Validate has support for remote validations and you're not using it.

Please take a look to remote rule.

Upvotes: 2

NT_
NT_

Reputation: 2246

Try using $('#createapp').validate( ...code...).cancelSubmit = true;

Upvotes: 0

Related Questions