我有一个相当复杂的情况，我需要多个提交按钮来处理不同的事情。例如“保存”和“删除”。

其基础是它也不显眼，所以我不能只是让它成为一个普通的按钮。但也想利用html5验证。

此外，如果用户按下enter键触发预期的默认提交，提交事件将被覆盖;在本例中保存。

这里是处理表单的努力，使用/不使用javascript和html5验证，同时使用提交和单击事件。

jsFiddle演示- HTML5验证提交和点击覆盖

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

使用Javascript的警告是，浏览器默认的onclick必须传播到submit事件must发生，以便在不支持您的代码中的每个浏览器的情况下显示错误消息。 否则，如果点击事件被event. preventdefault()覆盖或返回false，它将永远不会传播到浏览器的提交事件。

需要指出的是，在某些浏览器中，当用户按下回车键时，不会触发表单提交，而是触发表单中的第一个提交按钮。因此有一个console.log('form submit')来显示它没有触发。

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

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

例如，如果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
}

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

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

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

来自:html5表单验证

我找到了一个适合我的方法。 只需要像这样调用一个javascript函数:

action=“javascript：myFunction（）;”

然后是html5验证……真的很简单:-)

2022香草JS解决方案

纯JavaScript提供了所需的所有函数。我知道这个问题是关于jQuery的，但即使是jQuery的答案也使用了这些函数，即checkValidity()和reportValidity()。

测试整个表单

let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
    // Only needed if event is submit, otherwise this line can be skipped 
    event.preventDefault();

    // This is the important part, test if form is valid
    if (form.checkValidity() === false){
        // This is the magic function that displays the validation errors to the user
        form.reportValidity();   
        return; 
    }

    // Code if all fields are valid; continue form submit or make Ajax call.
})

测试特定领域

checkValidity()和reportValidity()不仅可以在表单上使用，还可以在特定的字段上使用。如果不需要，不需要创建表单或虚拟提交按钮。

// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false){
    // If not, show the errors to the user
    inputElement.reportValidity();
    return;
}

// Nothing? Great, continue to the Ajax call or whatever

显然，这必须在由事件侦听器调用的函数中才有意义。