Jquery remote ignoring / breaking CSS?

Jquery remote ignoring / breaking CSS?

Hi all,

I’m having a problem with JQuery validate remote calls, the basic idea is that when an existing record id is input it is checked against the DB and an error message is shown.
All the validation itself works fine (i.e. error messages are shown for all incorrect fields ) but the problem is that when  remote validation is called only the CSS for the remotely fields CSS is changed on error even if other fields are incorrect.
When when the details in other (none remotely validated) fields are subsequently changed  the CSS starts working fine, but the remotely validated field stops automatically validating until the page is revalidated  (I'm guessing this is because JQuery needs to do another remote call to check validity).
This problem only seems to occur when remote validation is invoked and  seems to work fine at all other times.







Here’s my code for reference:

The validate function called when CRUD operation is requested:
  1.  function validateForm() {
        
        var validator = $('#detailsForm').validate({
            rules: rules,
            messages: messages,
            highlight: function(element) {
                $(element).addClass('errorInput');
            },
            unhighlight: function (element) {
                $(element).removeClass('errorInput');
            }
        });
                
        var result = validator.form();
        return result;
    }
















The rules object:

  1. var rules = {
       
        id: {
            required: true,
            number: true,
            maxlength: 9,
                 remote: {
                url:'../resources/lib/cons/jqAdmin/adminAjax.php',
                type: 'post',
                data: {
                     mode:'idCheck',
                    Student_No:function () {
                        return $('#id').val();   
                    }
                } 
            }
        },
        forename: {
            required: true,
            maxlength: 255
        },
        surname: {
            required: true,
            maxlength: 255
        },   
        addr1: {
            required: true,
            maxlength: 255
        },
        addr2: {
            required: true,
            maxlength: 255
        },
        addr3: {
            required: true,
            maxlength: 255
        },   
        addr4: {
            required: true,
            maxlength: 255
        },
        postcode: {
            required: true,
            postUK: true
        },   
        pemail: {
            required: true,
            email:true
        },
        wemail: {
            required: true,
            email:true
        },
        hphone: {
            required: true,
            phoneUK: true
        },
        wphone:{
            required:true,
            phoneUK:true
        },   
        mphone: {
            required: true,
            phoneUK: true
        }
    };

































































And my CSS:

For the inputs:

  1. .standardInput {
        background-color: #FFFFCC;
        display:block;
      
    }

    .errorInput{
        background-color: #FA8072;
        border: 2px solid red;
        display:block;
    }

    label.error {
      
       color: red;
       padding-left: .5em;
       vertical-align: top;
       display:block;
       font-size: 0.60em;
       font-weight: bold;
    }































Can anyone help please? I've been trying to sort this for two days and I'm stumped.

Thanks in advance.

Update:

Fixed the problem, I had to set the Ajax request for the remote call to sync because it was overriding the other validation when a response was being received, hope this may help someone in the future