當使用form.submit時，必需屬性不起作用

Question

我正在使用html5必需屬性來檢查用戶是否填寫了必填字段。只要我使用提交按鈕，每件事似乎都可以正常工作。但是，當我將提交按鈕更改爲普通按鈕，然後使用onClick事件調用JavaScript函數，以便在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

使用提交按鈕，並給他們兩種不同的ID，也許loginSubmit和提交。抓住了點擊這兩個提交按鈕，檢查，哪個ID是在DOM樹：

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

Answer 2

你有沒有嘗試過的，而不是：

<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 3

還要確保喲您正在支持「必需」的瀏覽器上進行測試：http://www.w3schools.com/tags/att_input_required.asp

Internet Explorer 10，Firefox，Opera和Chrome支持必需的屬性。

注意： Internet Explorer 9及更早版本或Safari中不支持該標記的必需屬性。

Answer 4

HTML5驗證只適用於表單提交。你需要在你的JavaScript驗證年底要做到這一點：

document.newdiscussion.submit(); 

見：http://www.w3schools.com/jsref/met_form_submit.asp