如何防止提交但仍验证必填字段？

Posted 2023-05-07

【中文标题】如何防止提交但仍验证必填字段？

【英文标题】：How to prevent submit but still validate required fields?

【发布时间】：2014-03-28 15:27:33

【问题描述】：

我有一个表单，提交时我用e.preventDefault() 阻止它，但我仍然希望浏览器在我进行 AJAX 调用之前验证必填字段。

我不想花哨的 javascript 验证，我只想让浏览器验证必填字段 (html5)。

我怎样才能做到这一点？

【问题讨论】：

对于不支持 HTML5 表单验证的浏览器是否有任何考虑/回退？如果浏览器支持 HTML5 验证，则不需要添加任何内容（只要存在适当的属性）。像这样的东西：jsfiddle.net/girlie_mac/X6Uuc

重复：***.com/questions/11866910/…

@JackPattishallJr.是的，但现在我没有时间。而且由于我在服务器端使用框架，因此字段仍然经过验证。谢谢。

【参考方案1】：

即使您不进行checkValidity 检查，它仍然有效。在chrome中，如果表单无效，它不会调用表单上的提交函数：

$(document).ready(function()
    $("#calendar_form").submit(function(e)
        e.preventDefault();
        calendarDoAjax();
    );

    function calendarDoAjax()
        var proceed = false;
        if( $("#calendar_form")[0].checkValidity )
            if ($("#calendar_form")[0].checkValidity()) 
                proceed = true;
            
        else
            proceed = true;
        
        if (proceed) 
            //Do ajax call
        
    

);

【参考方案2】：

在提交函数的末尾添加：

if (evt && evt.preventDefault) 
    evt.preventDefault();
 else if (event) 
    event.returnValue = false;


return false;

并像这样在你的函数中传递 var evt：

function(evt)  /* Your Code */ 

【讨论】：

不行，我刚试过。这个可行：***.com/questions/11866910/…