0
我想知道如何在提交表单时将页面滚动到错误的字段。 我搜索了高和低，我发现jquery的许多解决方案，但没有解决方案的工作，因为我希望。 我找到解决方案，当我提交成功时滚动页面，但不是当我有错误时。 为了更好地理解，我下面的注释的源代码：滚动到错误的字段错误
// function that check filled when key up
function checkFilled(variable) {
\t 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) {
\t 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) {
\t 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')
\t \t \t \t \t \t .not(':button, :submit, :reset, :hidden')
\t \t \t \t \t \t .val('');
\t \t \t \t \t \t $("#msg_nom").html('');
\t \t \t \t \t \t $("#msg_email").html('');
\t \t \t \t \t \t $("#msg_sujet").html('');
\t \t \t \t \t \t $("#msg_message").html('');
\t \t \t \t \t \t 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);
*/
\t \t \t \t \t \t
},
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 ==“”）时执行。 （dataString ==“”）时发现错误！我不明白你的意思！ – xtensa1408 2015-04-03 13:06:40
评论代码是在这种情况下块： else if（nom ==“”） 而且这个条件甚至没有被检查，因为它之前的那个：if（dataString ==“”）为真。 – 2015-04-03 13:36:10