javascript - 滚动到错误的字段 ERROR

Question

我想知道如何在提交表单时将页面滚动到错误的字段。我到处搜索，发现很多 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>

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

Answer 1

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