javascript - required attribute not working when form.submit is used - Stack Overflow

admin管理员组

文章数量:1415460

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()" autoplete="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="ment">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;"/>';
?>

Here is the javascript:

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

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

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()" autoplete="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="ment">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;"/>';
?>

Here is the javascript:

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

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

• javascript
• html

Share Improve this question Follow asked May 27, 2011 at 9:57 sasidharsasidhar 7,7621616 gold badges5151 silver badges7878 bronze badges 2

• Why do you want a normal button as submit button? A normal button isn't linked with the form, the browser don't check the required attributes of the input fields! – ChristianB Commented May 27, 2011 at 10:53
• @ChristianB as you can see, when the cookies are not set, i ask for a user credentials and want to validate the submitted credentials using ajax(not shown here). Other wise the form gets submitted normally. – sasidhar Commented May 27, 2011 at 17:51

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

Also make sure that you are testing it on a browser that supports "required": http://www.w3schools./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./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(); 
}

本文标签： javascriptrequired attribute not working when formsubmit is usedStack Overflow