如果用户输入了空格或换行符，则 JQuery 验证不起作用

Posted 2023-05-08

【中文标题】如果用户输入了空格或换行符，则 JQuery 验证不起作用

【英文标题】：JQuery Validation does not work if the user has entered blank spaces or line breaks

【发布时间】：2018-05-29 20:24:48

【问题描述】：

我有以下 TinyMCE 编辑器。当用户尝试提交表单而不填写任何内容时，客户端验证会触发。

但是，如果用户输入了空格或换行符，则验证不起作用。

在这种情况下如何触发客户端验证？

目前我的表单如下所示：

视图模型：

 [Required]
 public string Comments  get; set; 

查看：

<form id="tinymceform">
  <div class="tinymceholder">
     @html.TextArea("Comments", null, new  id = "mytextarea" )
     @Html.ValidationMessage("Comments")
  </div>

  <button type="submit">Submit</button>
</form>

以上渲染如下：

<textarea name="Comments" id="mytextarea" data-val="true" data-val-required="The Comments field is required." aria-hidden="true" style="display: none;" aria-required="true" aria-describedby="Comments-error"></textarea>
<span class="field-validation-valid" data-valmsg-for="Comments" data-valmsg-replace="true"></span>

脚本：

<script type="text/javascript">
    tinymce.init(
         selector: '#mytextarea'
    );

    if ($(".tinymceholder").length === 0) 
        return;
    else 

        $.validator.setDefaults(
             ignore: []
        );
    
</script>

我尝试了以下方法，但似乎不起作用。？

 $('#tinymceform').submit(function(e)
    e.preventDefault();

    var content = tinymce.activeEditor.getContent( format: 'text' );

    if ($.trim(content) === '') 
        $('#tinymceform').validate().showErrors(
            "Comments": "This field cannot be empty"
        ););
    

    if (!$('#tinymceform').valid()) return false;

    this.submit();

);

【问题讨论】：

插件中内置了一个规范器，可以修剪空白。但是，我不知道您将如何在您的框架中实现这一点。 jqueryvalidation.org/normalizer

您尝试的解决方案无法正常工作，因为它正在尝试执行 jQuery Validate 插件已经为您执行的操作...阻止默认提交以进行验证。您必须在框架及其插件的范围内工作。

我认为最好的办法是编写自己的自定义方法来替换 required。

@Sparky 验证适用于其他字段，当我应用 showErrors() 方法时，它似乎没有显示此特定字段的错误。也许是因为它已经有一个必需的规则。

@sparky 将规范器应用于单个字段的正确语法是什么？

【参考方案1】：

首先：摆脱 jQuery 验证器。

第二：在你的 [Required] 注释中加上这个：

[RegularExpression(@"^\S*$", ErrorMessage = "No white space allowed")]

你应该很高兴。