Question

我正在使用html5 required属性来检查用户是否填写了必填字段。只要我使用提交按钮，每件事似乎都能正常工作。但是，当我将提交按钮更改为普通按钮，然后使用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

还要确保您在支持“required”的浏览器上进行测试：http://www.w3schools.com/tags/att_input_required.asp

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

注意： Internet Explorer 9及更早版本或Safari中不支持该标记的必需属性。

Answer 2

使用提交按钮并为其提供两个不同的ID，可能是 loginSubmit 和提交。赶上点击这两个提交按钮并检查哪个ID在DOM树中：

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

Answer 3

你尝试过而不是：

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

HTML5验证仅适用于表单提交。您需要在JavaScript验证结束时执行此操作：

document.newdiscussion.submit();

请参阅：http://www.w3schools.com/jsref/met_form_submit.asp

Answer 5

您可以在表单标签中使用onsubmit属性：

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

和按钮：

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

和功能：

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

使用form.submit时，必需属性不起作用

5 个答案: