如何在弹出窗口中显示jquery验证错误消息？

Question

我想在弹出窗口中显示邮政编码字段错误消息。其他字段不需要弹出错误消息。我使用了下面的代码。怎么解决这个问题。

$(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 [phone], for stock sets support.",
         name: "Please enter venu name",
         address: "Please enter address",
         date: "Please enter date",
         description: "Please enter description",


    }

})

});

如何仅在警报或弹出窗口中显示邮政编码错误消息。请任何人帮忙。

Answer 1

使用

errorPlacement

选项

errorPlacement（默认：将错误标签放置在无效元素之后） 类型：函数() 自定义创建的错误标签的位置。第一个参数：创建的错误标签作为 jQuery 对象。第二个参数：作为 jQuery 对象的无效元素。

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

Answer 2

您可以使用 errorPlacement

来做到这一点

1. 定义一个带有隐藏跨度选项的前端，该选项将用于填充动态错误。
2. 设置 jquery.validate 以使用自定义消息验证规则集
3. 利用

   errorPlacement

   获取验证器识别出的任何错误的句柄。
4. 识别出错误后，利用 jquery 的

   .css

   函数将可见性 css 分配给 span 元素。
5. 确认成功后，利用jquery的

   .css

   函数将不可见CSS分配给span元素。

我还注意到，

errorPlacement

处理程序似乎响应输入框中的任何更改，但仅在存在实际错误时才显示弹出窗口。尽管我不确定，但内部寻找现有错误可能是一些聪明的事情。

$(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.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/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>