滚动到错误的字段ERROR

Question

我想知道在提交表单时如何将页面滚动到错误的字段。 我搜索了高低，我发现很多解决方案与jquery但没有解决方案工作，如我所愿。 当我成功提交时，我找到了滚动页面的解决方案，但是当我遇到错误时却没有。 为了更好地理解，请在我注释的源代码下面：

＆＃13;

＆＃13;

// 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;
        });
    });
   

＆＃13;

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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您编写的代码是正确的（滚动页面的代码并不像您在注释中所写的那样工作），问题是它没有执行，因为第一个条件（dataString ==“”）为真。 / p>