Geek asks and answers

Required attribute does not work when .submit form is used

I use the html5 attribute to check if the required fields are filled in by the user or not. Everything seems to be working fine while I use the submit button. But when I change the submit button to a regular button, and then call the JavaScript function with the onClick event to do some validation in javascript, and then I use document.form.formname.submit () to submit the form. But when I do this, the required fields are not 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"/>';
    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
    }
}
+3
source share
4 answers

, , "": http://www.w3schools.com/tags/att_input_required.asp

Internet Explorer 10, Firefox, Opera Chrome.

. Internet Explorer 9 Safari.

+1

, , loginSubmit . , DOM:

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

:

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

, put required="required" required

0

HTML5 submit. JavaScript:

document.newdiscussion.submit();

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

0

More articles:


All Articles