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

我想在不提交表单的情况下触发验证。这可能吗?


当前回答

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

不是最好的答案,但对我来说是可行的。

其他回答

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

你说的是两种不同的东西“HTML5验证”和使用javascript/jquery的HTML表单验证。

HTML5“拥有”用于验证表单的内置选项。例如在字段上使用“required”属性,如果不使用javascript/jquery,表单提交可能会失败(基于浏览器实现)。

使用javascript /jquery,你可以做这样的事情

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

您不需要jQuery来实现这一点。在你的表单中添加:

onsubmit="return buttonSubmit(this)

或JavaScript:

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

在buttonSubmit函数(或任何调用它的函数)中,可以使用AJAX提交表单。buttonSubmit只会在你的表单在HTML5中被验证时被调用。

如果这有助于任何人,这是我的buttonSubmit函数:

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;
}

我的一些表单包含多个提交按钮,因此这一行if (submitvalue == e.elements[i].value)。我使用单击事件设置了submitvalue的值。

你可以在不提交表单的情况下完成。

例如,如果id为“search”的表单提交按钮是另一种表单。你可以在提交按钮上调用click event,然后调用ev。然后是preventDefault。 对于我的案例,我验证表单A提交的表单B。 像这样

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

我知道这个问题已经有了答案,但我还有另一个可能的解决方案。

如果使用jquery,你可以做到这一点。

首先在jquery上创建两个扩展,这样你就可以在需要时重用它们。

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

接下来,在你想使用它的地方做一些这样的事情。

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>