Вручную вызывает проверку html5 при нажатии кнопки

Question

Я пытаюсь обрабатывать проверку формы при нажатии кнопки. Он проверяет форму, но не показывает ошибку. Может ли кто-нибудь помочь мне в этом?

<form id="the-form" action="#"> 
    <input type="text" required="required" placeholder="Required text" /> 
    <input type="email" required="required" placeholder="email" /> 
    <button id="btn" type="button">Submit</button> 
</form> 

JavaScript:

$("#btn").on("click", function(){ 
    if($("#the-form")[0].checkValidity()) 
    { 
     alert('validated'); 
    } 
    else 
    { 
     //show errors 
     return false; 
    } 
}); 

http://jsfiddle.net/5ycZz/

Answer 1

Я достиг этого, выполнив указанные ниже действия:

1) У меня форма:

<form> 
    <textarea required></textarea> 
    <input type="submit" style="display:none;"/> 
</form> 

<a>Some other button to trigger event</a> 

2) Теперь мы должны проверить, если форма заполнены правильно:

//this is <a> click event: 
if (!$('form')[0].checkValidity()) { 
    $('form').find('input[type="submit"]').click(); 
    return false; 
} 

Это вызовет форму отправки, но не будет посылать, потому что есть ошибки;)

Оказывается, что ошибки проверки html5 отображаются на входе [тип = «отправить»] нажмите :)

Надежда будет работать для вас тоже! :)

Answer 2

Удалить заявление еще. (Update)

$("#btn").on("click", function(){ 
if($("#the-form")[0].checkValidity()) 
{ 
    alert('validated'); //will appear if name and email are of valid formats 
} 
}); 

Answer 3

здесь является идеальным ответом

<form id="the-form" action="#"> 
<input type="text" required="required" placeholder="Required text" /> 
<input type="email" required="required" placeholder="email" /> 
<button id="btn" type="submit">Submit</button> 

$("#btn").on("click", function(){ 
if($("#the-form")[0].checkValidity()) 
{ 
    alert('validated'); 
} 
else 
{ 
    return 0; 
} 

});

Answer 4

Вы должны иметь возможность просто добавить onclick = "return validateForm()".

<button id="btn" onclick="return validateForm()" type="button">Submit</button> 

Answer 5

Попробуйте

reportValidity() 

Таким образом, вы должны были бы

$("#btn").on("click", function(){ 
    if($("#the-form")[0].checkValidity()) { 
     alert('validated'); 
    } 
    else { 
     $("#the-form")[0].reportValidity(); 
    } 
});