required attribute not working when form.submit is used

I am using the html5 required attribute to check if mandatory fields are being filled in by the user or not. Every thing seems to be working fine as long as i use a submit button. But when i change the submit button to be a normal button and then call a JavaScript function with the onClick event so that some verification is done in javascript and then i use document.form.formname.submit() to submit the form. But when i do this, The required fields are not being checked whether they are empty or not. I am using Chrome 11.0 Here is the html code:

<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"/>';
    ech开发者_运维百科o   '<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;"/>';
?>

Here is the javascript:

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

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

Also make sure that you are testing it on a browser that supports "required": http://www.w3schools.com/tags/att_input_required.asp

The required attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome.

Note: The required attribute of the tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

Use submit buttons and give them two different id's, maybe loginSubmit and submit. Catch out the click on this two submit buttons and check, which id is in DOM tree:

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

Did you tried instead of:

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

this:

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

Note that instead of putting required="required" I used required

HTML5 validation only works on form submit. You'll need to do this at the end of your JavaScript validation:

document.newdiscussion.submit();

see: http://www.w3schools.com/jsref/met_form_submit.asp

You can use the onsubmit attribute in form tag:

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

and button:

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

and function:

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