Question

当他按下“提交”按钮时，如何将用户返回到未填充的字段？

我有这样的事情：

    <!--Contact Name-->
    <div class="section" id="inputdiv">
         <span class="fieldname">Name:</span>
         <input type="text" id="contactname" /> <!-- Nessesary to be filled-->
           <script type="text/javascript">
               var contactname = new LiveValidation('contactname');
               contactname.add(Validate.Presence);
           </script>  
    </div>


     <a class="button-more" style="width:903px; float: right; font-size: 15px; margin-top: 15px;" href="">Submit my answers</a>

或者只是这个：

<input type="text" id="contactname" /> <!-- Nessesary to be filled-->

<a href="">Submit my answers</a>

Answer 1

当用户点击“提交”时，您应该执行以下代码：

if (document.getElementById('contactname').value=='') document.getElementById('contactname').focus();
else // if the field isn't empty, proceed

编辑：哦，对不起，我刚注意到了“jquery”标签。它必须在jQuery中创建吗？我不知道jQuery，但你也可以使用上面的代码;）

请记住，您还应检查服务器端的所有字段，因为有经验的用户可能会轻松操作客户端代码。

Answer 2

理想情况下，如果您希望允许未在其浏览器中运行javascript的用户使用您的表单，则应使用<input type="submit" />按钮，然后使用服务器端验证，并使用javascript验证作为这些选项的快捷方式正在运行它的用户。

要添加javascript验证，您可以将一些javascript附加到表单的提交事件或锚点的click事件：

    <form name="example" action="example.asp" method="post" onsubmit="javascript:return validate(this) ;">
        <input type="text" name="contactname" id="contactname" />
        <input type="submit" name="submit" value="Button-Label" />
    </form>
    <script type="text/javascript">
        function validate(frm) {
            var message = '' ;
            if(frm.contactname.length < 1) {
                // Put cursor in field.
                if(message.length < 1) frm.contactname.focus() ;
                message = message + 'Please enter your name.\n' ;
            }
            if(message.length > 0) {
                alert(message) ;
                // Stop the form submitting
                return false ;
            }
            return true ;
        }
    </script>

Answer 3

表单验证不应仅在HTML和JS的前端发生，因为它太容易绕过。您还应该在后端进行一些检查。

话虽如此，你需要实际拥有一张表格才能正确检查其有效性。例如：

<form id="abcd">
 <input id="input" />
</form>

然后

$("abcd").submit(function(e){
  return ( $("#input").val() != "" );
});

我使用了jQuery语法，但它与普通的JS基本相同。

如果您还可以使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/

之类的所有精彩插件

如果您不想要表单，只需点击提交链接进行测试并在此处测试值。

js表格填写检查

3 个答案: