javascript - 滚动到错误的字段 ERROR

标签 javascript jquery html css

我想知道如何在提交表单时将页面滚动到错误的字段。 我到处搜索,发现很多 jquery 解决方案,但没有我希望的解决方案。 我找到了在我成功提交时滚动页面但在我出错时不滚动页面的解决方案。 为了更好地理解,在我注释的源代码下方:

// function that check filled when key up
function checkFilled(variable) {
	var inputVal = document.getElementById(variable).value;
    if (inputVal == "") {
        document.getElementById(variable).style.borderColor = "red";
    }
    else{
        document.getElementById(variable).style.borderColor = "green";
    }
}

// function that check email filled
function checkFilledEmail(variable) {
	fld_value = document.getElementById(variable).value;
    is_m_valid = 0;
    if (fld_value.indexOf('@') >= 1) {

        m_valid_dom = fld_value.substr(fld_value.indexOf('@')+1).length;
        
        if (m_valid_dom >= 1) {

        	is_m_valid = 1;
        }
        
    }
    if (is_m_valid) {
       document.getElementById(variable).style.borderColor = "green";
    } else {
       document.getElementById(variable).style.borderColor = "red";
    }
    
}


    $(function(){
        $("#contact").submit(function(event){
            var nom        = $("#nom").val();
            var sujet      = $("#sujet").val();
            var email      = $("#email").val();
            var message    = $("#message").val();
            var dataString = nom + sujet + email + message;
            var msg_all    = "Merci de remplir tous les champs";
            var msg_alert  = "Merci de remplir le champs: ";
            $("#msg_all").html('');
            $("#msg_nom").html('');
            $("#msg_email").html('');
            $("#msg_sujet").html('');
            $("#msg_message").html('');
            
            if(dataString  == "")
            {
                document.getElementById('nom').style.borderColor = "red";
                document.getElementById('email').style.borderColor = "red";
                document.getElementById('sujet').style.borderColor = "red";
                document.getElementById('message').style.borderColor = "red";
                
            }
            else if(nom == "")
            {
                
                document.getElementById('nom').style.borderColor = "red";
                 
                /*
                
                //In that position, this code didn't work but above with ajax it worked very well                     
                        $('html, body').animate({
                        scrollTop: $("#msg_nom").offset().top
                        }, 500);
                */

// => I want to find code that do the same action as scrollTop but with javascript.
               
            }
            
            else if(email == "")
            {
               
                document.getElementById('email').style.borderColor = "red";
            }
             else if(sujet == "")
            {
                
                document.getElementById('sujet').style.borderColor = "red";
            }

            else if(message == "")
            {
                
                document.getElementById('message').style.borderColor = "red";
            }
            else
            {
                
                $.ajax({
                    type : "POST",
                    url: $(this).attr("action"),
                    data: $(this).serialize(),
                    success : function(){
                        $("#msg_all").html(" <p style='text-align:center; margin-bottom:40px;'>Formulaire bien envoyé</p> ");
                        $(':input','#contact')
   						.not(':button, :submit, :reset, :hidden')
   						.val('');
   						$("#msg_nom").html('');
   						$("#msg_email").html('');
   						$("#msg_sujet").html('');
   						$("#msg_message").html('');
   						document.getElementById('nom').style.borderColor = "";
                        document.getElementById('email').style.borderColor = "";
                        document.getElementById('sujet').style.borderColor = "";
                        document.getElementById('message').style.borderColor = "";
                        
                      
                    //In that position, this code work and the screen scroll   
                      
                      /*
                        $('html, body').animate({
                        scrollTop: $("#msg_nom").offset().top
                        }, 500);
                      */
						
                    },
                    error: function(){
                        $("#msg_all").html("<p style='text-align:center; margin-bottom:40px;'>Erreur dappel, le formulaire ne peut pas fonctionner</p>");
                      document.getElementById('nom').style.borderColor = "";
                        document.getElementById('email').style.borderColor = "";
                        document.getElementById('sujet').style.borderColor = "";
                        document.getElementById('message').style.borderColor = "";
                    }
                });
            }
            return false;
        });
    });
   
element.style {
display: block;
height: auto;
}

.field-style {
width: 50%;
height: 46px;
margin-bottom: 26px;

background-color: transparent;

  }

.label-style {
margin-bottom: 9px;
font-family: Merriweather, serif;
line-height: 17px;
font-weight: 400;
  display:block;
}

element.style {
border-color: red;
}

.simple-button {
display: block;
margin-right: auto;
margin-left: auto;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="process.php" id="contact" method="POST">
       
       
            <label  for="nom" class="label-style">Nom</label>
            <input class="w-input field-style" id="nom" name="nom" onkeyup="checkFilled('nom');" type="text">
       
            <span id="msg_nom"></span>
       
        
            <label for="email" class="label-style">Email</label>
            <input class="w-input field-style" id="email" name="email"  onkeyup="checkFilledEmail('email');" type="email">
            <span id="msg_email"></span>

            <label for="sujet" class="label-style" >Sujet</label>
            <input class="w-input field-style" id="sujet" name="sujet" onkeyup="checkFilled('sujet');" type="text">
            <span id="msg_sujet"></span>
        
            <label class="label-style" for="message">Message</label>
            <textarea class="w-input messageform" id="message" name="message" onkeyup="checkFilled('message');"  rows="10" cols="80"></textarea>
            <span id="msg_message"></span>
        
        
            <span id="msg_all"></span>
            <input class="w-button simple-button" type="submit" value="Envoyer" />
        
    </form>

知道如何实现我的目标吗?或任何允许我继续搜索的关键字。

最佳答案

你写的代码是正确的(滚动页面的代码并没有像你在评论中写的那样工作),问题是它没有执行,因为第一个条件(dataString == "")为真。

关于javascript - 滚动到错误的字段 ERROR,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29432308/

相关文章:

javascript - 如果选中生成框,如何显示 div

html - Navbar Bootstrap 中列表项之间的空间太大

javascript - 单击链接时的 jquery SAVE 对话框

javascript - 按下 ENTER 键时防止在 Textarea 中换行的代码不起作用

javascript - 单击另一行编辑时启用表单

jquery - Css 和 jquery ul 和 li 菜单样式

html - 显示302重定向-或与HTTP兼容的等待屏幕的内容

javascript - 在悬停方法上添加已删除的属性

javascript - 如何在 D3js 中动态添加图像到圆圈

javascript - 如何合并两个具有纬度和经度的数组以显示标记?