WordPress中Ninja Forms自定义手机号与姓名验证提交异常问题

AI 小北

2026-7-18

WordPress Ninja Forms 自定义手机号/姓名验证问题解决

问题描述

我在WordPress项目中使用Ninja Forms，需要为手机号和姓名字段添加自定义验证提示。目前表单存在两个问题：

姓名栏输入数字仍可提交
手机号栏输入文本仍可提交
当前表单仅支持邮箱和空字段验证。

我尝试用jQuery添加了这两类验证的错误提示，但即使出现错误提示，表单依然能提交，我的代码如下：

jQuery(document).ready(function () {
  jQuery(document).on("nfFormReady", function () {
    var form = jQuery("form"); 
    var submitButton = form.find('input[type="button"]');

    jQuery('input[type="text"]').focusout(function () {
      // jQuery('input[type="text"]').on("input", function () {
      var inputValue = $(this).val();
      var lettersRegex = /^[a-zA-Z]+$/;
      var errorMsg = "Please enter only letters";

      if (inputValue === "") {
        return $(this)
          .parents(".nf-field")
          .next(".nf-after-field")
          .find(".nf-error-wrap")
          .html("")
          .show();
      }

      if (!lettersRegex.test(inputValue)) {
        $(this)
          .parents(".nf-field")
          .next(".nf-after-field")
          .find(".nf-error-wrap")
          .html(
            '<div class="nf-error-msg nf-error-required-error">'
              errorMsg +
              "</div>"
          )
          .show();
      } else {
        $(this)
          .parents(".nf-field")
          .next(".nf-after-field")
          .find(".nf-error-wrap")
          .html("")
          .show();
      }
    });

    jQuery('input[type="tel"]').on("input", function () {
      var inputValue = $(this).val();
      var numRegex = /^\d+$/;
      var errorMsg = "Please enter only numbers";

      if (inputValue === "") {
        return $(this)
          .parents(".nf-field")
          .next(".nf-after-field")
          .find(".nf-error-wrap")
          .html("")
          .show();
      }

      if (!numRegex.test(inputValue)) {
        $(this)
          .parents(".nf-field")
          .next(".nf-after-field")
          .find(".nf-error-wrap")
          .html(
            '<div class="nf-error-msg nf-error-required-error">'
              errorMsg +
              "</div>"
          )
          .show();
      } else {
        $(this)
          .parents(".nf-field")
          .next(".nf-after-field")
          .find(".nf-error-wrap")
          .html("")
          .show();
      }
    });

    var errorMessages = form.find(".nf-error-msg");
    if (errorMessages.length > 0) {
      submitButton.prop("disabled", true);
    } else {
      submitButton.prop("disabled", false);
    }
  });
});

问题分析

你的代码存在几个核心问题，导致验证失效后表单仍可提交：

仅在nfFormReady事件触发时判断一次错误状态，没有在输入变化或提交前重新校验
没有拦截Ninja Forms的原生提交流程，即使显示了错误提示，表单依然会执行默认提交
选择器过于宽泛（input[type="text"]会匹配所有文本框），可能影响其他无关字段
字符串拼接存在语法错误（'...' errorMsg + '...'缺少连接符+）

解决方案

方法一：使用Ninja Forms原生验证API（推荐）

通过官方API添加自定义验证规则，兼容性更好，不会和插件的原生逻辑冲突。在主题的functions.php文件中添加以下代码：

add_filter( 'ninja_forms_register_actions', 'custom_nf_validation_actions' );
function custom_nf_validation_actions( $actions ) {
    // 注册姓名验证规则
    $actions['custom_name_validation'] = new NF_Actions_Custom_Name_Validation();
    // 注册手机号验证规则
    $actions['custom_phone_validation'] = new NF_Actions_Custom_Phone_Validation();
    
    return $actions;
}

// 姓名验证类
class NF_Actions_Custom_Name_Validation extends NF_Action {
    protected $_name = 'custom_name_validation';
    protected $_timing = 'early';
    protected $_priority = 10;

    public function __construct() {
        parent::__construct();
        $this->_nicename = __( '自定义姓名验证', 'ninja-forms' );
    }

    public function process( $action_settings, $form_id, $data ) {
        // 替换为你的姓名字段ID（在Ninja Forms编辑器中查看）
        $name_field_id = 1;
        $name_value = trim( $data['fields'][$name_field_id]['value'] ?? '' );
        
        // 正则规则：允许中文、字母、空格，可根据需求调整
        if ( ! empty( $name_value ) && ! preg_match( '/^[\p{L}\s]+$/u', $name_value ) ) {
            $data['errors'][$name_field_id][] = __( '姓名仅允许输入中文、字母或空格', 'your-text-domain' );
        }
        
        return $data;
    }
}

// 手机号验证类
class NF_Actions_Custom_Phone_Validation extends NF_Action {
    protected $_name = 'custom_phone_validation';
    protected $_timing = 'early';
    protected $_priority = 10;

    public function __construct() {
        parent::__construct();
        $this->_nicename = __( '自定义手机号验证', 'ninja-forms' );
    }

    public function process( $action_settings, $form_id, $data ) {
        // 替换为你的手机号字段ID（在Ninja Forms编辑器中查看）
        $phone_field_id = 2;
        $phone_value = trim( $data['fields'][$phone_field_id]['value'] ?? '' );
        
        // 正则规则：仅允许数字，可添加长度限制（比如/^\d{11}$/匹配11位手机号）
        if ( ! empty( $phone_value ) && ! preg_match( '/^\d+$/', $phone_value ) ) {
            $data['errors'][$phone_field_id][] = __( '手机号仅允许输入数字', 'your-text-domain' );
        }
        
        return $data;
    }
}

使用说明：

找到你表单中姓名和手机号字段的ID，替换代码中的$name_field_id和$phone_field_id
根据需求调整正则表达式，比如仅允许英文姓名可改为/^[a-zA-Z\s]+$/

方法二：修复jQuery代码，拦截提交事件

如果你坚持使用jQuery实现，需要修复代码中的问题并拦截表单提交：

jQuery(document).ready(function () {
    jQuery(document).on("nfFormReady", function () {
        // 替换为你的表单ID，避免影响其他表单
        var form = jQuery("#nf-form-1-wrap form"); 
        var submitButton = form.find('input[type="button"]');

        // 姓名验证：指定字段（用字段的类名或ID，不要全局匹配text输入框）
        form.find('.nf-field-name input[type="text"]').on("focusout input", function () {
            var $this = jQuery(this);
            var inputValue = $this.val().trim();
            // 支持中文的正则，仅英文可改为/^[a-zA-Z\s]+$/
            var lettersRegex = /^[\p{L}\s]+$/u;
            var errorMsg = "姓名仅允许输入中文、字母或空格";
            var $errorWrap = $this.parents(".nf-field").next(".nf-after-field").find(".nf-error-wrap");

            if (inputValue === "") {
                $errorWrap.html("").show();
                updateSubmitStatus();
                return;
            }

            if (!lettersRegex.test(inputValue)) {
                $errorWrap.html('<div class="nf-error-msg nf-error-required-error">' + errorMsg + "</div>").show();
            } else {
                $errorWrap.html("").show();
            }
            updateSubmitStatus();
        });

        // 手机号验证：指定字段
        form.find('.nf-field-phone input[type="tel"]').on("focusout input", function () {
            var $this = jQuery(this);
            var inputValue = $this.val().trim();
            var numRegex = /^\d+$/;
            var errorMsg = "手机号仅允许输入数字";
            var $errorWrap = $this.parents(".nf-field").next(".nf-after-field").find(".nf-error-wrap");

            if (inputValue === "") {
                $errorWrap.html("").show();
                updateSubmitStatus();
                return;
            }

            if (!numRegex.test(inputValue)) {
                $errorWrap.html('<div class="nf-error-msg nf-error-required-error">' + errorMsg + "</div>").show();
            } else {
                $errorWrap.html("").show();
            }
            updateSubmitStatus();
        });

        // 拦截表单提交，有错误时阻止提交
        form.on("submit", function (e) {
            var hasErrors = form.find(".nf-error-msg").length > 0;
            if (hasErrors) {
                e.preventDefault();
                // 滚动到第一个错误位置，提升用户体验
                jQuery("html, body").animate({
                    scrollTop: form.find(".nf-error-msg").first().offset().top - 50
                }, 500);
                return false;
            }
        });

        // 更新提交按钮状态
        function updateSubmitStatus() {
            var hasErrors = form.find(".nf-error-msg").length > 0;
            submitButton.prop("disabled", hasErrors);
        }
    });
});

修复要点：

缩小选择器范围，指定目标表单和字段，避免影响其他元素
绑定focusout和input事件，实现实时校验
添加表单提交拦截逻辑，有错误时阻止默认提交
修复字符串拼接的语法错误
提取updateSubmitStatus函数，统一更新按钮状态

内容的提问来源于stack exchange，提问作者Amal Jayan

WordPress中Ninja Forms自定义手机号与姓名验证提交异常问题

问题描述 #

问题分析 #

解决方案 #

方法一：使用Ninja Forms原生验证API（推荐） #

方法二：修复jQuery代码，拦截提交事件 #

问题描述

问题分析

解决方案

方法一：使用Ninja Forms原生验证API（推荐）

方法二：修复jQuery代码，拦截提交事件