如何在表单提交时修改输入框name属性，解决验证失效问题？

你需要调整代码逻辑，避免提交事件的无限递归，同时在提交前修改目标输入框的属性，具体实现如下：

1. 阻止默认提交行为：先调用e.preventDefault()，避免表单直接提交，留出修改属性的时间。
2. 修改目标输入框的属性：通过选择器定位到#et_pb_contact_firstname_0输入框，修改它的name属性（如果需要同时修改id可添加对应代码）。
3. 触发原生表单提交：使用原生DOM元素的submit()方法提交表单，这样不会触发jQuery绑定的submit事件，避免无限循环。

修改后的代码：

$('.et_pb_contact_form').submit(function (e) {
    // 阻止默认提交行为
    e.preventDefault();
    var $form = $(this);

    // 定位目标输入框，修改name属性
    $form.find('#et_pb_contact_firstname_0').attr('name', 'firstname');
    
    // 如果需要同时修改id属性，取消下面这行注释
    // $form.find('#et_pb_contact_firstname_0').attr('id', 'firstname');

    // 使用原生DOM方法提交表单，避免触发jQuery的submit事件循环
    $form[0].submit();
});

关键说明 #

• 不能在jQuery的submit回调里直接调用$form.submit()，这会再次触发绑定的submit事件，导致无限递归报错。
• 使用$form[0]获取原生表单DOM元素，调用它的submit()方法只会提交表单，不会触发jQuery的事件监听，完美解决循环问题。
• 先修改属性再提交，确保提交的表单数据使用修改后的name属性值，同时不会影响页面加载时的表单验证逻辑（验证在加载后到提交前执行，提交时才修改属性）。

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