Summernote与Jquery Validation插件的验证

huangapple
go评论78阅读模式
英文:

Summernote validation with Jquery Validation plugin

问题

  1. 我有一个表单，其中有一个远程验证字段。我的JavaScript代码如下：
  3. ```javascript
  4. $("#myform").validate({
  5.     rules: {
  6.         mainfield: {
  7.             remote: {
  8.                 url: "checksnote.php",
  9.                 type: "POST",
  10.                 data: {
  11.                     mainfield: function() {
  12.                         return $("#mainfield").summernote('isEmpty');
  13.                     }
  14.                 }
  15.             }
  16.         }
  17.     },
  18.     messages: {
  19.         mainfield: {
  20.             remote: "此字段为必填项",
  21.             //minlength: "最小长度为10"
  22.         }
  23.     },
  24.     submitHandler: function(form) {
  25.         alert("提交成功");
  26.         console.log("提交成功");
  27.         form.submit();
  28.     }
  29. });

问题是我无法得到任何响应。远程请求都显示有效，但浏览器中看不到任何Ajax请求。Mainfield是summernote文本区域。所有其他验证都正常工作。为什么远程请求甚至不发送请求？

更新-
我也尝试过添加方法，但不起作用。这就是为什么我尝试使用remote。如果有任何一个起作用都可以。浏览器没有显示任何错误。

  1. $.validator.addMethod('summernoteempty', function(value, element) {
  2.     if ($(element).summernote('isEmpty')) {
  3.         console.log("在summernote验证中！");
  4.         return false;
  5.     } else {
  6.         return true;
  7.     }
  8. }, "必须输入summernote内容");

规则如下：

  1. rules: {
  2.     mainfield: {
  3.         summernoteempty: true
  4.     }
  5. },
  6. messages: {
  7.     summernoteempty: "字段不能为空"
  8. }

我不明白我在这里做错了什么。它甚至不在控制台中显示消息。除了remote和add method之外，所有其他验证逻辑都正常工作。

  2. <details>
  3. <summary>英文:</summary>
  5. I have a form with a remote validation field. My Javascript is as bellow:
  7.     $(&quot;#myform&quot;).validate({
  8.             rules: {
  9.             mainfield: {
  10.               remote:{
  11.                   url: &quot;checksnote.php&quot;,
  12.                   type: &quot;POST&quot;,
  13.                   data: {
  14.                     mainfield: function() {
  15.                     return $(&quot;#mainfield&quot;).summernote(&#39;isEmpty&#39;);
  16.                   }
  17.                 }
  18.               }
  19.             }
  20.             },
  21.             messages:{
  22.               mainfield: {
  23.                 remote: &quot;This field is required&quot;,
  24.                 //minlength: &quot;Minimum Length is 10&quot;
  25.               }
  26.             },
  27.             submitHandler: function(form) {
  28.               alert(&quot;Successfully submittable&quot;);
  29.               console.log(&quot;Successfully submittable&quot;);
  30.               form.submit();
  31.             }
  32.           });
  34. Problem is I am unable to get any response at all. Both the remote requests show valid but no ajax request is seen in the browser. Mainfield is summernote textarea. All other validations are working perfectly fine. Any idea why remote is not even sending a request?
  36. **Update-**
  37. I also tried to add Method did not work. Thats why I tried remote instead. Either one is fine if works for me.
  38. This is my method code. Browser is not showing any error.
  40.     $.validator.addMethod(&#39;sumnoteempty&#39;, function(value,element){
  41.             //return false;
  42.             if(element.summernote(&#39;isEmpty&#39;)){
  43.               console.log(&quot;In summernote validation!&quot;);
  44.               return false;
  45.             }
  46.             else {
  47.               return true;
  48.             }
  49.           }, &quot;Must enter summernote content&quot;);
  51. Rules are as bellow:
  53.     rules: {
  54.     mainfield: {
  55.         sumnoteempty: true
  56.     }
  57.     },
  58.     message:{
  59.        sumnoteempty: &quot;Field can not be empty&quot;
  60.     }
  62. I dont understand what I am doing wrong here. It does not even show message in console. All other validation logic is working great. Except remote and add method.
  64. </details>
  67. # 答案1
  68. **得分**: 1
  70. 不需要查询服务器来评估字段是否为空。创建一个自定义规则，使用Summernote的`isEmpty`方法。
  72. ```javascript
  73. jQuery.validator.addMethod("requiredSummernote", function() {
  74.     // true to pass validation
  75.     // false to FAIL validation
  76.     return !($("#mainfield").summernote('isEmpty'));
  77. }, 'Summernote field is required');
  79. $("#myform").validate({
  80.     rules: {
  81.         mainfield: { // name attribute
  82.             requiredSummernote: true;  // apply the custom rule
  83.         }
  84.     },
  85.     ....
  86. });

由于Summernote隐藏了原始的textarea元素并构建了自己的元素，因此您需要执行以下几个操作以将它们整合在一起：

  • 编辑Validate插件的ignore选项，以强制验证隐藏的textarea元素。默认情况下，隐藏元素会被忽略。

  • 使用errorPlacement选项来更改验证消息出现在屏幕上的位置。它可能会出现在不合适的位置，因为实际的数据输入元素是隐藏的。

  • 您可能需要构建处理程序，以以编程方式触发验证。由于实际的数据元素是隐藏的，所以需要使用blur或change处理程序以及.valid()方法来强制进行测试。

  • 相反，如果错误消息不会消失，请构建一个在blur上触发的处理程序，该处理程序调用.valid()，然后隐藏包含错误消息的label元素。

英文:

There is no need to query the server to evaluate when a field is left empty. Create a custom rule that uses the Summernote isEmpty method.

  1. jQuery.validator.addMethod(&quot;requiredSummernote&quot;, function() {
  2.     // true to pass validation
  3.     // false to FAIL validation
  4.     return !($(&quot;#mainfield&quot;).summernote(&#39;isEmpty&#39;));
  5. }, &#39;Summernote field is required&#39;);
  7. $(&quot;#myform&quot;).validate({
  8.     rules: {
  9.         mainfield: { // name attribute
  10.             requiredSummernote: true;  // apply the custom rule
  11.         }
  12.     },
  13.     ....

https://jqueryvalidation.org/jQuery.validator.addMethod/

Since Summernote hides the original textarea element and constructs its own, you will need to do several other things to pull this all together:

  • Edit the ignore option of the Validate plugin in order to force
    validation of the hidden textarea element. Hidden elements are
    ignored by default.

  • Use the errorPlacement option to alter where the validation message
    appears on the screen. It may be out of place since the actual data
    input element is hidden.

  • You may need to construct handlers that programmatically trigger
    validation. Since the actual data element is hidden, validation
    needs to be triggered with a blur or change handler and the
    .valid() method which forces a test.

  • Conversely, if the error message will not go away, construct a
    handler that is triggered on blur that calls .valid() and then
    hides the label element containing the error message.

huangapple
  • 本文由 发表于 2023年7月20日 16:38:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76728082.html
  • jquery
  • jquery-validate
  • summernote
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定