Как показать все применимые сообщения об ошибках поверх формы вместо того, чтобы показывать сообщения об ошибках один за другим?

У меня есть многоэтапная функциональность. Ниже приведен код для него. Я попытался создать jsFiddle для этого кода, но он не сохранялся там в скрипке, и я не смог его создать. Если вы просто создаете HTML-файл в своей системе и скопируете весь код, он будет запущен в любом браузере без каких-либо изменений.Как показать все применимые сообщения об ошибках поверх формы вместо того, чтобы показывать сообщения об ошибках один за другим?

<!doctype HTML> 
<html> 
    <head> 
    <style> 
    /*custom font*/ 
@import url(http://fonts.googleapis.com/css?family=Montserrat); 

/*basic reset*/ 
* {margin: 0; padding: 0;} 

html { 
    height: 100%; 
    /*Image only BG fallback*/ 
    background: rgba(0,0,0,0.3) url('bg.jpg'); 
    background-color: rgba(0,0,0,0.3); 
} 

body { 
    font-family: montserrat, arial, verdana; 
} 

#mhead { 
    font-family: Georgia !important; 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    text-align: center; 
    font-family: georgia; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    padding: 20px; 
} 
/*form styles*/ 
#msform { 
    width: 400px; 
    margin: 110px auto; 
    text-align: center; 
    position: relative; 
} 
#msform fieldset { 
    background: white; 
    border: 0 none; 
    border-radius: 3px; 
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 
    padding: 20px 30px; 

    box-sizing: border-box; 
    width: 80%; 
    margin: 0 10%; 

    /*stacking fieldsets above each other*/ 
    position: absolute; 
} 
/*Hide all except first fieldset*/ 
#msform fieldset:not(:first-of-type) { 
    display: none; 
} 
/*inputs*/ 
#msform input, #msform textarea { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    width: 100%; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
} 
/*buttons*/ 
#msform .action-button { 
    width: 100px; 
    background: #27AE60; 
    font-weight: bold; 
    color: white; 
    border: 0 none; 
    border-radius: 1px; 
    cursor: pointer; 
    padding: 10px 5px; 
    margin: 10px 5px; 
} 
#msform .action-button:hover, #msform .action-button:focus { 
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; 
} 
/*headings*/ 
.fs-title { 
    font-size: 15px; 
    text-transform: uppercase; 
    color: #2C3E50; 
    margin-bottom: 10px; 
} 
.fs-subtitle { 
    font-weight: normal; 
    font-size: 13px; 
    color: #666; 
    margin-bottom: 20px; 
} 
/*progressbar*/ 
#progressbar { 
    margin-bottom: 30px; 
    overflow: hidden; 
    /*CSS counters to number the steps*/ 
    counter-reset: step; 
} 
#progressbar li { 
    list-style-type: none; 
    color: rgb(0,0,0); 
    text-transform: uppercase; 
    font-size: 11px; 
    width: 33.33%; 
    float: left; 
    position: relative; 
} 
#progressbar li:before { 
    content: counter(step); 
    counter-increment: step; 
    width: 20px; 
    line-height: 20px; 
    display: block; 
    font-size: 10px; 
    color: #333; 
    background: white; 
    border-radius: 3px; 
    margin: 0 auto 5px auto; 
} 
/*progressbar connectors*/ 
#progressbar li:after { 
    content: ''; 
    width: 100%; 
    height: 2px; 
    background: white; 
    position: absolute; 
    left: -50%; 
    top: 9px; 
    z-index: -1; /*put it behind the numbers*/ 
} 
#progressbar li:first-child:after { 
    /*connector not needed before the first step*/ 
    content: none; 
} 
/*marking active/completed steps green*/ 
/*The number of the step and the connector before it = green*/ 
#progressbar li.active:before, #progressbar li.active:after{ 
    background: #27AE60; 
    color: white; 
} 
.red{ 
color: red; 
} 
.success{ 
color:green; 
} 
#message{ 
padding-top: 200px; 
position: relative; 
text-align: center; 
} 
    </style> 

    <!-- jQuery --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <!-- jQuery easing plugin --> 
    <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script> 
    <script> 
    $(document).ready(function() { 
    jQuery('#sucess').hide(); 
    var current_fs, next_fs, previous_fs; //fieldsets 
     var left, opacity, scale; //fieldset properties which we will animate 
     var animating; //flag to prevent quick multi-click glitches 
     $(".next").click(function(event) { 
      var fv=formValidation(event); 
      if(fv) { 
      } else { 
       return false; 
      } 
      if(animating) return false; 
      animating = true; 

      current_fs = $(this).parent(); 
      next_fs = $(this).parent().next(); 

      //activate next step on progressbar using the index of next_fs 
      $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

      //show the next fieldset 
      next_fs.show(); 
      //hide the current fieldset with style 
      current_fs.animate({opacity: 0}, { 
       step: function(now, mx) { 
        //as the opacity of current_fs reduces to 0 - stored in "now" 
        //1. scale current_fs down to 80% 
        scale = 1 - (1 - now) * 0.2; 
        //2. bring next_fs from the right(50%) 
        left = (now * 50)+"%"; 
        //3. increase opacity of next_fs to 1 as it moves in 
        opacity = 1 - now; 
        current_fs.css({'transform': 'scale('+scale+')'}); 
        next_fs.css({'left': left, 'opacity': opacity}); 
       }, 
      duration: 800, 
      complete: function() { 
       current_fs.hide(); 
       animating = false; 
      }, 
      //this comes from the custom easing plugin 
      easing: 'easeInOutBack' 
     }); 
    }); 

    $(".previous").click(function() { 
     if(animating) return false; 
     animating = true; 

     current_fs = $(this).parent(); 
     previous_fs = $(this).parent().prev(); 

     //de-activate current step on progressbar 
     $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

     //show the previous fieldset 
     previous_fs.show(); 
     //hide the current fieldset with style 
     current_fs.animate({opacity: 0}, { 
      step: function(now, mx) { 
       //as the opacity of current_fs reduces to 0 - stored in "now" 
       //1. scale previous_fs from 80% to 100% 
       scale = 0.8 + (1 - now) * 0.2; 
       //2. take current_fs to the right(50%) - from 0% 
       left = ((1-now) * 50)+"%"; 
       //3. increase opacity of previous_fs to 1 as it moves in 
       opacity = 1 - now; 
       current_fs.css({'left': left}); 
       previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
      }, 
      duration: 800, 
      complete: function() { 
       current_fs.hide(); 
       animating = false; 
      }, 
      //this comes from the custom easing plugin 
      easing: 'easeInOutBack' 
     }); 
    }); 

    $("#msform").submit(function() { 

     var fname=jQuery('#fname').val(); 
     if ($.trim(fname).length == 0) { 
     document.getElementById("fname").style.borderColor = "#E34234"; 
     jQuery('.fs-error').html('<span style="color:red;"> Please Enter First Name !</span>'); 
     jQuery('.fs-error').show(); 
     return false; 
     } else { 
     jQuery('.fs-error').hide(); 
     var serializedReturn = formData(); 
     window.location = "http://localhost/multistepform/success.php"; 
      return false; 
     } 
    }); 
    }); 

    function formData() { 
    var serializedValues = jQuery("#msform").serialize(); 
     var form_data = { 
     action: 'ajax_data', 
     type: 'post', 
     data: serializedValues, 
    }; 
    jQuery.post('insert.php', form_data, function(response) { 
      alert(response); 
      // document.getElementById("sucess").style.color = "#006600"; 
      // jQuery('#sucess').show(); 
    }); 
    return serializedValues; 
    } 

    function formValidation(e) { 

    var emailval=jQuery('#email').val(); 
     var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
    // Checking Empty Fields 
    var vemail=mailformat.test(emailval) 
    if ($.trim(emailval).length == 0 || vemail==false) { 
     jQuery('.fs-error').html('<span style="color:red;"> Email is invalid !</span>'); 
     return false; 
    } else { 

     jQuery('.fs-error').hide(); 
    } 

     var f_name = document.getElementById("f_name").value; 
    if (f_name == '') { 
     document.getElementById("f_name").style.borderColor = "#E34234"; 

     jQuery('.fs-error').html('<span style="color:red;"> Please enter First Name !</span>'); 
     jQuery('.fs-error').show(); 
     return false 
    } else { 
     document.getElementById("f_name").style.borderColor = "#006600"; 
     document.getElementById("l_name").style.borderColor = "#006600"; 
      jQuery('.fs-error').hide();  
    } 

    var l_name = document.getElementById("l_name").value; 
    if (l_name == '') { 
     document.getElementById("l_name").style.borderColor = "#E34234"; 
    jQuery('.fs-error').html('<span style="color:red;"> Please enter Last Name !</span>'); 
     jQuery('.fs-error').show(); 
     return false 
    } else { 
     document.getElementById("l_name").style.borderColor = "#006600"; 
      jQuery('.fs-error').hide(); 
      return true; 
    } 
    } 
    </script> 

    </head> 
    <body> 
     <div id="mhead"><h2>Multi Step Form with Progress Bar using jQuery, CSS3 and PHP - <span class="red">Info</span>Tuts</h2></div> 

     <!-- multistep form --> 
     <form id="msform"> 
     <!-- progressbar --> 
     <ul id="progressbar"> 
      <li class="active">Account Setup</li> 
      <li>Social Profiles</li> 
      <li>Personal Details</li> 
     </ul> 
     <!-- fieldsets --> 
     <fieldset> 
      <h2 class="fs-title">Create your account</h2> 
      <h3 class="fs-subtitle">This is step 1</h3> 
      <div class="fs-error"></div> 
      <input type="text" name="email" id="email" placeholder="Email" /> 
      <input type="text" name="f_name" id="f_name" placeholder="First Name" /> 
      <input type="text" name="l_name" id="l_name" placeholder="Last Name" /> 
      <input type="button" name="next" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset> 
      <h2 class="fs-title">Social Profiles</h2> 
      <h3 class="fs-subtitle">Your presence on the social network</h3> 
      <input type="text" name="twitter" placeholder="Twitter" /> 
      <input type="text" name="facebook" placeholder="Facebook" /> 
      <input type="text" name="gplus" placeholder="Google Plus" /> 
      <input type="button" name="previous" class="previous action-button" value="Previous" /> 
      <input type="button" name="next" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset> 
      <h2 class="fs-title">Personal Details</h2> 
      <h3 class="fs-subtitle">We will never sell it</h3> 
      <div class="fs-error"></div> 
      <input type="text" name="fname" id="fname" placeholder="First Name" /> 
      <input type="text" name="lname" id="lname" placeholder="Last Name" /> 
      <input type="text" name="phone" id="phone" placeholder="Phone" /> 
      <textarea name="address" id="address" placeholder="Address"></textarea> 
      <input type="button" name="previous" class="previous action-button" value="Previous" /> 
      <input type="submit" name="submit" class="submit action-button" value="Submit" />   
     </fieldset> 
    </form> 
    </body> 
</html>

Сообщения об ошибках В настоящее время показаны один за другим, когда пользователь нажимает на кнопку «Далее», но я хочу, чтобы показать все три сообщения об ошибках вместе, когда пользователь не вводит каких-либо данных в полях именно. Адрес электронной почты, имя и фамилия:. В настоящее время я могу показывать сообщения об ошибках один за другим. Я больше не хочу этого делать, я хочу показать все соответствующие сообщения об ошибках, когда пользователь нажимает кнопку «Далее».

Как мне это сделать? Пожалуйста, помогите мне.

Еще раз извинения за невозможность создания js скрипки.

Спасибо.

источник

2015-01-11 Anonymous

пожалуйста масштабироваться код вниз только соответствующий код. Нам не нужно прокручивать кучу css и нерелевантных других обработчиков событий и пытаться выяснить, где проблемы – charlietfl

@charlietfl: Да, я понял. Но я добавил CSS и другой код, так как я не могу создать jsFiddle для него. Я просто добавил этот код, чтобы он выглядел хорошо и функционально, когда вы копируете-вставляете и запускаете вышеуказанный код в своем браузере. Пожалуйста, проигнорируйте css и другие обработчики событий, просто сосредоточьтесь на функции formValidaion() из кода JavaScript. Это основная часть, которая отображает сообщения об ошибках. –

У вас есть два варианта:

1) Вы собираете все сообщения об ошибках в переменном, с помощью добавления:

rrrorText .= '<span class="stylish">we have toruble!</span>'

и выходного сигнала до формирования.

2) Вы делаете пустой DIV:

<div id="poo"></div>

И добавить ошибок к нему с чем-то вроде JavaScript:

document.getElementById('poo').innerHTML .= 'we have another problem!';

источник

2015-01-11 03:49:03

Но я хочу правильно отображать сообщения об ошибках. Итак, как я должен показывать сообщения об ошибках отдельно в каждой строке, если я продолжаю добавлять сообщения об ошибках. Вкратце вы могли бы показать пример добавления двух сообщений об ошибке таким образом, чтобы он отображал один ниже другого в форме? –

Добавить «
» в конце или в начале каждой ошибки. –

Как показать все применимые сообщения об ошибках поверх формы вместо того, чтобы показывать сообщения об ошибках один за другим?

ответ

Смежные вопросы