обязательный атрибут не работает при использовании form.submit

Question

Я использую атрибут html5 required, чтобы проверить, заполняются ли обязательные поля пользователем или нет. Кажется, все работает нормально, пока я использую кнопку отправки. Но когда я изменяю кнопку отправки на обычную кнопку, а затем вызываю функцию JavaScript с событием onClick, чтобы сделать некоторую проверку в javascript, а затем я использую document.form.formname.submit () для отправки формы. Но когда я делаю это, обязательные поля не проверяются, являются ли они пустыми или нет. Я использую Chrome 11.0 Вот HTML-код:

<form method="post" action="./post_discussion.php" name="newdiscussion">
<span style="font-size:16px; font-weight:bold; font-family:Arial, Helvetica, sans-serif">Title: </span>

<input id="title_text" name="title_text" style="width:650px; margin-left:10px;" type="text" placeholder="Whats the title of your discussion? Be clear." required="required" />
<br/><br/>
<div style="margin-top:10px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;">Make your point</div>

<textarea id="text_area" name="text_area" style=" height:200px; margin-top:10px;" placeholder="Describe your point of discussion. Be clear on the point and provide convincing
 evidence.A claim without evidance will not be encouraged by the site." cols="90" required="required"/>
</textarea><br />

<div style="margin-top:10px; margin-bottom:5px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;">Tags</div>
<input id="tags_textfield" onkeyup="tags_generator()" name="tags_textfield" type="text" style="width:500px;" placeholder="Enter atleast one tag" onblur="clear_tags()" autocomplete="off" required="required"/>

<ul id="tags_ul"><div id="tag_drop_down"></div></ul><br/>

<div style="margin-top:10px; margin-bottom:5px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;">Users involved</div>
<input id="uids_textfield" name="uids_textfield" type="text" style="width:500px;" placeholder="Enter all the users involved" required="required"/>
<br/>

<?php
 if(!isset($_COOKIE["username"]))
 {
     echo '<div id="comment">You are not signed in. Please enter your credintials to post the discussion.</div><br/>';
    echo 'Username: <input id="bottom_username" type="text" name="username"/><br/> 
       Password: <input id="bottom_password" name="password" type="password"/>';
    echo   '<br/><br/>
<input id="post_button" onclick="new_discussion(0)" type="button" value="Post the discussion" style="margin-top:10px;"/>';
 }
 else
 echo   '<br/><br/>
<input id="post_button" type="button" onclick="new_discussion(1)" value="Post the discussion" style="margin-top:10px;"/>';
?>

Вот код JavaScript:

function new_discussion(arg)
{
    if(arg==1)
    {

        document.forms.newdiscussion.submit();
    }
    else
    {
        //some logic here
    }
}

Answer 1

Также убедитесь, что вы тестируете его в браузере, который поддерживает «required»: http://www.w3schools.com/tags/att_input_required.asp

Обязательный атрибут поддерживается в Internet Explorer 10, Firefox, Opera и Chrome.

Примечание: Обязательный атрибут тега не поддерживается в Internet Explorer 9 и более ранних версиях или в Safari.

Answer 2

Вы можете использовать атрибут onsubmit в теге формы:

<html:form styleId="myForm" action="/login" onsubmit="return demo()">

и кнопка:

<input type="submit" value="login" />

и функция:

function demo() {
  document.getElementById("myForm").submit(); 
}

Answer 3

Проверка HTML5 работает только при отправке формы.Это необходимо сделать в конце проверки JavaScript:

document.newdiscussion.submit();

см. http://www.w3schools.com/jsref/met_form_submit.asp

Answer 4

Вы пробовали вместо:

<input id="uids_textfield" name="uids_textfield" type="text" style="width:500px;" placeholder="Enter all the users involved" required="required"/>

это:

<input id="uids_textfield" name="uids_textfield" type="text" style="width:500px;" placeholder="Enter all the users involved" required />

Обратите внимание, что вместо ввода required="required" я использовал required

Answer 5

Используйте кнопки отправки и дайте им два разных идентификатора, возможно loginSubmit и submit .Нажмите на эти две кнопки отправки и проверьте, какой идентификатор находится в дереве DOM:

if(document.getElementById('submit') != undefined) {
    // start new discussion
    ...
} else {
    // do login and start new discussion
    ...
}