javascript - onsubmit 未在 HTML 表单上调用

Question

我的网页中有以下表单:

<form id="collabAccess"  onsubmit="submitCollabForm()" >
         <div id="row-1">
              <div class="two-col" id="email"><input type="text" placeholder="Enter email addresses separated by commas"/></div>
                        <div id="collabSelect" class="collab two-col styled-select">
                            <select id="collabaccess">
                                <option>Can Read</option>
                                <option>Can Write</option>
                                <option>Can Read & Write </option>
                                <option>Administrator </option>
                            </select>
                        </div>
            </div>
            <div id="message">
                   <textarea id="personalMessage" cols="154" rows="10" placeholder="Optional: include a personal message"></textarea>
            </div>
               <div id="submit-wrapper"><input type="submit" value="Add Collaborators" id="addCollaborators" disabled='disabled'  class="small-btn disabled"/></div>
 </form>

函数submitCollabForm()如下:

function submitCollabForm() {
console.log('in submitCollabForm');
var valid = validateEmails();
if (valid == false) {
    var email = document.getElementById('email');
    email.addClass('error');
}

}

其中 validateEmails() 只是另一个 js 函数，用于验证表单中的电子邮件地址是否具有正确的格式。

但是，看起来 onsubmit 根本没有被调用。即使我将内容更改为 onsubmit="console.log('xyz')，也不会输出任何控制台语句。我还在控制台中检查了 javascript 错误，但我什么也没得到。

是否有任何原因导致 onsubmit 无法正常工作？

Answer 1

您的验证函数需要返回 false 以阻止表单提交。最好有

onsubmit="return submitCollabForm()"

参见With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"?了解详情。