如果不在表单中填写一个字段，我的光标不应该移动到 javascript 验证中的下一个字段

Without filling one field in form my cursor should not move to next field in javascript validation

本文关键字：字段 光标 不应该 我的 移动 javascript 下一个 验证 一个 表单 如果不      更新时间：2023-09-26

我正在使用javascript对客户端的表单字段进行验证。在我的表单中，如果没有填写表单中的一个字段，光标不应移动到下一个字段。如何做到这一点，并提供一些技巧来更好地进行客户端验证。我已包含我的表格

<form class="form-horizontal" role="form" name="Myform" action="" onsubmit="return validationform();">
                    <div class="form-group">
                        <label for="firstname">First Name</label>
                        <input type="text" class="form-control" id="firstname" onblur="validationform();" name="firstname" placeholder="Enter Name">
                        <p id="fname"></p>
                    </div>  
                    <div class="form-group">
                        <label for="lastname">Last Name</label>
                        <input type="text" class="form-control" id="lastname" onblur="validationform();" name="lastname" placeholder="Enter Name">
                        <p id="lname"></p>
                    </div>  
                    <div class="form-group">
                        <label for="lastname">Email</label>
                        <input type="text" class="form-control" onblur="validationform();" id="email" name="email" placeholder="Enter Name">
                        <p id="vemail"></p>
                    </div>
                    <input type="submit" class="btn btn-default" name="submit" value="Submit">          
                </form>

脚本：

<script type="text/javascript">
        function validationform(){
            document.getElementById('fname').innerHTML = "";
            document.getElementById('lname').innerHTML = "";
            document.getElementById('vemail').innerHTML = "";
            if(document.Myform.firstname.value == ""){
                document.getElementById('fname').innerHTML="Enter your first name";
                document.Myform.firstname.focus();
                return false;
            }
            if(document.Myform.lastname.value == ""){
                document.getElementById('lname').innerHTML="Enter your last name";
                document.Myform.lastname.focus();
                return false;
            }
            if(document.Myform.email.value == ""){
                document.getElementById('vemail').innerHTML="Enter your email Id";
                document.Myform.email.focus();
                return false;
            }
            return true;
        }
    </script>

对输入字段使用 jQuery 模糊事件 以下是根据您的情况的示例

$(function(){
        $('#firstname').blur(function(e){
          if($(this).val().length <= 1){
            $(this).focus();
          }
        });
    });

<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter Name">

不要忘记包含jquery文件。用于面糊验证

  1. 创建泛型函数
  2. 在要验证的每个输入中放置一个 DO-验证类
  3. 在 DO-验证类模糊事件上调用验证函数
  4. 在输入字段中添加一个 data-error 属性，并使用错误消息对其进行值值，并从那里获取错误消息，并在验证失败时向用户显示

如果我有时间，我会尝试向您发送代码。

相关文章：