Question posted in
You can find the official documentation here.

Jquery ajax – How can i validate after pressing 4th digits of number before page submit using ajax and JavaScript?

I’m working on an existing postal code which is not saved it is a requirement. I have called ajax after pressing 4 digits using keyup function. My ajax is working fine but I’m not able to retrieve validation message I mean after ajax call the same code will be saved in the database.

//Trigger ajax event on sender address after 4th character typed.
$('#postalCode').on('keyup', function () {
    if ($(this).val().length == 4) {
        type: "get",
            $.ajax({
                url: "/masterController/checkPostalcode?ajax=true",
                data: {
                    postalCode: $("#postalCode").val()
                },
                success: function (result) {
                    alert("user already exists");
                    //Now validate here show message postal code already exist. How?
                },
                error: function (response) {
                    $('#ErrorContainer').hide();
                }
            });
    }
});

//This validation part

$("#subOfficeForm").validate({
    rules: {
        "postalCode": {
            required: true,
            minlength: 4,
            maxlength: 4,
            digits: true
        },
        "SubOffice": {
            required: true,
            minlength: 2
        }
    },
    errorPlacement: function (error, element) {
        if ((element.attr("name") == "postalCode")) {
            $("#ReceiverErrorContainer").html(error);
            $("#ReceiverErrorContainer").show();
        }
        else if ((element.attr("name") == "SubOffice")) {
            $("#ErrorContainer").html(error);
            $("#ErrorContainer").show();
        }
        //displays a tooltip
        element.attr('title', error.text());

        $(".error").tooltip({
            position: {
                my: "left+5 center",
                at: "right center"
            },
            trigger: "hover"
        });
    },
    //highlight the error field with red
    highlight: function (element, error) {
        $(element).css('background', '#FFCCCB');
    },
    // Called when the element is valid:
    unhighlight: function (element) {
        $(element).css('background', '#ffffff');
    }
});

//And this is snapshots
Befor entering 4th digits

//And entering 4th digits
After entering 4th digests of postal code

Tags:

2

Answers


  1. 0

    There’s a few things wrong with this. It looks like the message is coming back from the server side, so something would need to be adjusted there. Also, JS lives client side and is only a suggestion (it can be manipulated and then people can write injection to your database), you must validate on the server side for security. You would want to use regex on both sides to ensure validation

    [0-9]{4}
    Login or Signup to reply.
  2. 0

    If I’m not mistaken, you need to check the validation result like this :

    success: function (result) {
                if(!result)
                  {
                      showErrorAlert('error message') ;
                      preventDefault();
                  }
                else{
                      //submit data 
                  }
            },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search