I want display the Postcode field error message in popup. Other fields error message not needed popup.I have used the below code. How solve this.

$(document).ready(function() {

$("#conference_form").validate({
   rules: {
        conpostcode:  {
            required: true,    
             minlength: 4, 
            remote: {
                url:"<?php echo base_url() ?>tools/check_postcode/1",
                type: "post",
              data:
                      {
                          postcode: function()
                          {
                              return $('#conpostcode').val();
                          }
                      },

            }           
          },
         name: "required",
         address: "required",
                   date: "required",
         description:"required",

    },
    messages: {
        conpostcode: "We don't have service this location, Please call us +44 12345454, for stock sets support.",
         name: "Please enter venu name",
         address: "Please enter address",
         date: "Please enter date",
         description: "Please enter description",


    }

})

});

How display the postcode error message only in alert or popup. Please any one help.

I want display the Postcode field error message in popup. Other fields error message not needed popup.I have used the below code. How solve this.

$(document).ready(function() {

$("#conference_form").validate({
   rules: {
        conpostcode:  {
            required: true,    
             minlength: 4, 
            remote: {
                url:"<?php echo base_url() ?>tools/check_postcode/1",
                type: "post",
              data:
                      {
                          postcode: function()
                          {
                              return $('#conpostcode').val();
                          }
                      },

            }           
          },
         name: "required",
         address: "required",
                   date: "required",
         description:"required",

    },
    messages: {
        conpostcode: "We don't have service this location, Please call us +44 12345454, for stock sets support.",
         name: "Please enter venu name",
         address: "Please enter address",
         date: "Please enter date",
         description: "Please enter description",


    }

})

});

How display the postcode error message only in alert or popup. Please any one help.

• javascript
• jquery
• jquery-validate

• The jQuery Validation Engine is not the same plugin. Please be aware when assigning tags. Edited. – Sparky Commented Oct 12, 2016 at 15:17

2 Answers 2

Use errorPlacement option

errorPlacement (default: Places the error label after the invalid element) Type: Function() Customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

    errorPlacement: function(error,element){ 
                        //error.insertAfter(element); 
                        //use error.html() as content in your popup div or simply
                        alert(error.html());             
                     }

You can do this with errorPlacement

1. Define a front-end with a hidden span option that will be used to populate dynamic errors.
2. Set jquery.validate up to validate on a ruleset with custom messages
3. Utilize errorPlacement to grab a handle on any error recognized by the validator.
4. Upon error recognized, utilize jquery's .css function to assign visibility css to the span element.
5. Upon success recognized, utilize jquery's .css function to assign invisibility css to the span element.

I've also noticed that the errorPlacement handler seems to respond to any change in the input box, but only display the popup when there is an actual error. It's probably some smart thing internally looking for an existing error, though I'm not sure.

$(document).ready(function() {
 $(".edit_order").validate({
      rules: {
        "order[purchase_order_number]": {
            // Disallow \ and / characters
            pattern: /^[^\\/]*$/,
            maxlength: 5,
        }
      },
      messages: {
        "order[purchase_order_number]": {
            pattern: "You cannot use \\ or / inside of your PO #",
            maxlength: "You cannot have a PO # larger than 5 characters"
        }
      },
      errorPlacement: function (error, element) {
      console.log("error?")
          // Grab the error from html generated by jquery.validate
          let content = error[0].textContent
console.log(error[0])
          // Populate the error tooltip with retrieved content
          $("#po-custom-popup").text(content)

          // Enable the error tooltip
          $(".error-popup-po-text").css({
              'visibility': 'visible',
              'opacity': 1
            })
      },
      success: function (label, element) {
          // Hide the tooltip or reset its visibility
          $(".error-popup-po-text").css({
              'visibility': 'hidden',
              'opacity': 0
          });
      },
    });
})

.error-popup-po .error-popup-po-text {
    width : 147px;
    visibility: hidden;
    background-color: #FFF;
    border-radius:4px;
    border: 1px solid #4e4e4e;
    position: absolute;
    z-index: 1;
    padding: 5px;
    margin-top : 5px;
    opacity: 0;
    transition: opacity 0.5s;
    color: #c40000;
    text-align: center;
}

.error-popup-po .error-popup-po-text::after {
    position: absolute;
    top: 5%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/additional-methods.js"></script>

<form class="edit_order">
<div class="error-popup-po">
  <div class="field_with_errors">
    <input type="text" name="order[purchase_order_number]">
  </div>
  
  <span id="po-custom-popup" class="error-popup-po-text" style="visibility: hidden; opacity: 0;"></span>
</div>
</form>