如何在不通过jQuery提交的情况下强制进行html5表单验证

jQuery HTML

小宇宙

2020-03-26

我的应用程序中有此表单,我将通过AJAX提交它,但是我想使用HTML5进行客户端验证。因此,我希望能够通过jQuery强制进行表单验证。

我想触发验证而不提交表单。可能吗?

第3775篇《如何在不通过jQuery提交的情况下强制进行html5表单验证》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
逆天神乐 2020.03.26

您不需要jQuery即可实现。在您的表单中添加:

onsubmit="return buttonSubmit(this)

或在JavaScript中:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

在您的buttonSubmit函数(或任何您称呼的函数)中,您可以使用AJAX提交表单。buttonSubmit仅当您的表单通过HTML5验证时才会被调用。

In case this helps anyone, here is my buttonSubmit function:

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Some of my forms contain multiple submit buttons, hence this line if (submitvalue == e.elements[i].value). I set the value of submitvalue using a click event.

小胖A 2020.03.26
    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

来自:html5表单验证

番长樱梅 2020.03.26

我找到了适合我的解决方案。只需像这样调用javascript函数即可:

action="javascript:myFunction();"

然后您就进行了html5验证...非常简单:-)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android