为什么验证弹出不会在HTML5验证中失败

Question

在我的任务中，我需要进行html 5验证。实际上我在我的表单中没有提交选项。所以我刚刚添加为“disply：none”。并且从外部单击选项触发提交选项，因为HTML 5验证在单击“提交”时起作用。还有一件事是我应该添加自定义验证消息。消息正常但在输入文本后添加自定义消息动态地工作丑陋。

<form id="myform"  method="post" action="#" onSubmit="javascript:return false;" >
<input type="text" id="myID" required>
     <input type="text"  id="secId" required>
<input type="submit" id='formSubmit' style="display:none">

              

Jquery代码

    function checkValidation(element){    
    var flag = true;
    element.setCustomValidity("");
    if (!element.validity.valid && element.validity.valueMissing) {
        element.setCustomValidity("This field cannot be left blank");
        flag = false;
    } else if(element.validity.patternMismatch){  
        element.setCustomValidity("PLease enter correct format");  
        flag = false;
    } else {
        element.setCustomValidity("");
    }
    if(!flag){
        $('#formSubmit').click();
        //if(!$("#myform")[0].checkValidity()) return false;
    } else {
        return true;
    } 
}
$('#butId').click(function(){
                var $inputs = $('#myform :input');
                var formData ={};

                $inputs.each(function(e) {
                        formData[this.name] = $(this).val();
                        var flag = checkValidation(this);
                        if(!flag){
                        return false;               
                       }                        
                    });                 

            });

jsfiddle