Граница ошибки ошибки проверки кода ошибки JavaScript скрывается, если все входные данные верны - PullRequest
Новая
       23

Граница ошибки ошибки проверки кода ошибки JavaScript скрывается, если все входные данные верны

0 голосов
/ 21 декабря 2018

Я кодирую разные функции для каждого входа в JavaScript.В основном, у меня есть три типа ошибок.В начале ввода Как галочка или Крест.Под надписью как Plaese введите свое имя, а последнее находится в верхней части экрана в поле.В поле включены все ошибки, такие как ошибка имени и ошибки фамилии.

================================================================================

Пожалуйста, введите ваше имя

Пожалуйста, введитеназвание

, пожалуйста, введите адрес электронной почты и soo on ...

Я хочу скрыть верхнюю рамку вокруг ошибок, если все ошибки верны.Надеюсь, вы поняли, что я имею в виду: 

//Values--aditon

    var title=document.getElementById('title').value;
    var first_name=document.getElementById('first_name').value;
    var lname=document.getElementById('last_name').value;
    var email=document.getElementById('email').value;
    var dob=document.getElementById('dob').value;
    var contact_number=document.getElementById('contact_number').value;

//End here
  function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
} 
function emailvalidate()
{
       var email=document.getElementById('email').value;

    if(validateEmail(email))
    {
        document.getElementById('email_success_msg').style.display='block';
        document.getElementById('email_error_msg').style.display='none';
        document.getElementById('top-email').style.display='none';
        document.getElementById('below_error_email_msg').style.display='none';
        return true;
    }
    else
    {

        document.getElementById('below_error_email_msg').style.display='block';
        document.getElementById('top-email').style.display='block';
        document.getElementById('email_success_msg').style.display='none';
        document.getElementById('email_error_msg').style.display='block';
        return false;
    }
}
function titlevalidation()
{
       var title=document.getElementById('title').value;
    if(title=='')
    {

        document.getElementById('headerErrorBox').style.display='block';
        document.getElementById('top-tag').style.display='block';
        document.getElementById('top-title').style.display='block';
        document.getElementById('title_below_msg').style.display='block';
        document.getElementById('below_error_msg').style.display='block';
        document.getElementById('below_success_msg').style.display='none';

        return false;
    }
    else
    {
        document.getElementById('top-title').style.display='none';
        document.getElementById('title_below_msg').style.display='none';
        document.getElementById('below_error_msg').style.display='none';
        document.getElementById('title_below_msg').style.display='none';
        document.getElementById('below_success_msg').style.display='block';
        if (fnamevalidaton()==true) 
        {
            document.getElementById('headerErrorBox').style.display='none';
        }

    }
}
function fnamevalidaton()
{
    var first_name=document.getElementById('first_name').value;
    if(first_name=='')
    {

        document.getElementById('headerErrorBox').style.display='block';
        document.getElementById('top-tag').style.display='block';
        document.getElementById('fname_error_msg').style.display='block';
        document.getElementById('top-fname').style.display='block';
        document.getElementById('below_error_fname_msg').style.display='block';
        document.getElementById('fname_success_msg').style.display='none';
        return false;
    }
    else
    {
        document.getElementById('fname_success_msg').style.display='block';
        document.getElementById('fname_error_msg').style.display='none';
        document.getElementById('top-fname').style.display='none';
        document.getElementById('below_error_fname_msg').style.display='none';
        return true;
    }
}    
function lastnamevalidation()
{
    var lname=document.getElementById('last_name').value;
    if(lname=='')
    {

        document.getElementById('headerErrorBox').style.display='block';
        document.getElementById('top-tag').style.display='block';
        document.getElementById('top-lname').style.display='block';
        document.getElementById('below_error_lname_msg').style.display='block';
        document.getElementById('lname_error_msg').style.display='block';
        document.getElementById('lname_success_msg').style.display='none';
        return false;
    }
    else
    {
        document.getElementById('top-lname').style.display='none';
        document.getElementById('lname_error_msg').style.display='none';
        document.getElementById('lname_success_msg').style.display='block';
        document.getElementById('below_error_lname_msg').style.display='none';
        return true;
    }
}
function dobvalidation()
{

    var dob1=document.getElementById('dob_input1').value;
    var dob2=document.getElementById('dob_input2').value;
    var dob3=document.getElementById('dob_input3').value;
    if(dob1=='' || dob2=='' || dob3=='')
    {
        document.getElementById('headerErrorBox').style.display='block';
        document.getElementById('top-dob').style.display='block';
        document.getElementById('dob_error_msg').style.display='block';
        document.getElementById('below_error_dob_msg').style.display='block';
      //  document.getElementById('dob_icon').style.marginLeft='-58px';
        document.getElementById('dob_success_msg').style.display='none';
        return false;
    }
    else
    {
        document.getElementById('top-dob').style.display='none';
        document.getElementById('dob_error_msg').style.display='none';
        document.getElementById('below_error_dob_msg').style.display='none';
        document.getElementById('dob_success_msg').style.display='block';
       // document.getElementById('dob_icon').style.marginLeft='-58px';
        return true;
    }
}
function contactsvalidation()
{

    var contact_number=document.getElementById('contact_number').value;
    if(contact_number=='' || contact_number.length !=11)
    {
    document.getElementById('headerErrorBox').style.display='block';
    document.getElementById('contact_error_msg').style.display='block';
    document.getElementById('contact_success_msg').style.display='none';
    document.getElementById('below_error_contact_msg').style.display='block';   
    document.getElementById('top-contact').style.display='block';
    return false;
    }
    else
    {
    document.getElementById('contact_error_msg').style.display='none';
    document.getElementById('contact_success_msg').style.display='block';
    document.getElementById('top-contact').style.display='none';
    document.getElementById('below_error_contact_msg').style.display='none';
    return true;
    }
}
function validate()
{
    var fname = fnamevalidaton();
    var email=emailvalidate();
    var lname=lastnamevalidation();
    var title=titlevalidation();
    var dob=dobvalidation();
    var contact=contactsvalidation();
    return fname && email && lname && title && contact && dob;
}
<form id="payForm" action="address-to-be-licensed.php" method="post" novalidate="novalidate" onsubmit="return validate()">
                            <div id="headerErrorBox" class="info err" style="padding: 20px; padding-bottom: 30px; display: none;">
                                <p class="icon">
                                    <li id="top-tag" style="list-style: none; padding: 0 0 0.77em; display:block;">Something's not right. Please check those details again carefully. </li>
                                <ul class="errorDetails">
                                    <li style="display:none;" id="top-title">Please select your title</li>
                                    <li style="display: none;" id="top-fname">Please enter your first name</li>
                                    <li style="display: none;" id="top-lname">Please enter your last name</li>
                                    <li style="display: none;" id="top-email">Please enter your email address</li>
                                    <li style="display: none;" id="top-dob">Please enter your date of birth</li>
                                    <li style="display: none;" id="top-contact">Please enter your contact number</li></ul>
                            </div>

                            <p class="intro">Please complete all sections of this form, unless marked as optional.</p>

                            <div id="nameDetailsDiv1" class="frmRow contained name nonBusiness">

                                <div class="field_div">

                                    <label for="nameDetails_ddlTitle" id="nameDetails_lblTitle">Title</label>
                                    <select name="title" onchange="return titlevalidation()" id="title"  class="frmSelect" autocomplete="off">
                                        <option value="">-Select-</option>
                                        <option value="Mr">Mr</option>
                                        <option value="Mrs">Mrs</option>
                                        <option value="Miss">Miss</option>
                                        <option value="Ms">Ms</option>
                                        <option value="Dame">Dame</option>
                                        <option value="Doctor">Doctor</option>
                                        <option value="Lade">Lady</option>
                                        <option value="Lord">Lord</option>
                                        <option value="Professor">Professor</option>
                                        <option value="Reverend">Reverend</option>
                                        <option value="Sir">Sir</option>
                                        <option value="None">None</option>
                                    </select>
                                    <span class="inline1 errorMessage" id='below_error_msg' style="display: none;"></span>
                                    <span class="inline1 successMessage" id="below_success_msg" style="display: none;"></span>
                                    <p class="error_msg" id="title_below_msg" style="display: none;">Please select your title</p>
                                </div>

                                <div class="field_div" >
                                    <label for="first_name" id="">First name</label>
                                    <input id="first_name" name="first_name" class="frmText" type="text" value="" autocomplete="off" onblur="return fnamevalidaton()">
                                    <span class="inline1 successMessage" id="fname_success_msg" style="display: none;"></span>
                                    <span class="inline1 errorMessage" id="fname_error_msg" style="display: none;"></span>
                                    <p class="error_msg" id="below_error_fname_msg" style="display: none;">Please enter your first name</p>
                                </div>

                                <div class="field_div">
                                    <label for="last_name" id="">Last name</label>
                                    <input id="last_name" name="last_name" class="frmText validate" type="text" value="" autocomplete="off" onblur=" return lastnamevalidation()">
                                    <span class="inline1 successMessage" id="lname_success_msg" style="display: none;"></span>
                                    <span class="inline1 errorMessage" id="lname_error_msg" style="display: none;"></span>
                                    <p class="error_msg" id="below_error_lname_msg" style="display: none;">Please enter your last name</p>
                                </div>

                                <p class="help">A TV Licence can only be held under a single name.</p>

                                <div class="field_div">
                                    <label for="email" id="">Email address</label>
                                    <input id="email" name="email" class="frmText validate" type="email" value="" autocomplete="off" onblur="return emailvalidate()">
                                    <span class="inline1 successMessage" id="email_success_msg" style="display: none;"></span>
                                    <span class="inline1 errorMessage" id="email_error_msg" style="display: none;"></span>
                                    <p class="error_msg" id="below_error_email_msg" style="display: none;">Please enter your email address</p>
                                </div>

                                <p class="helpEmail">
                                    We will only contact you with essential information about the TV Licence.
                                </p>

                                    <div class="field_div">
                                        <label for="dob" id="">Date of birth</label>

                                    <select name="dob_day" onchange="return dobvalidation()" id="dob_input1"  class="frmSelect" autocomplete="off" style="width: 30%;">
                                        <option value="">DD</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                        <option value="25">25</option>
                                        <option value="26">26</option>
                                        <option value="27">27</option>
                                        <option value="28">28</option>
                                        <option value="29">29</option>
                                        <option value="30">30</option>
                                        <option value="31">31</option>
                                    </select>
                                        <select name="dob_mm" onchange="return dobvalidation()" id="dob_input2"  class="frmSelect" autocomplete="off" style="width: 25%">
                                         <option value="">MM</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                    </select>

                                    <select name="dob_yy" onchange="return dobvalidation()" id="dob_input3"  class="frmSelect" autocomplete="off" style="width: 33%;">
                                        <option value="">YYYY</option>
                                        <option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
</select>
                                    </select>
                                        <!--
                                    <input id="dob_input" name="dob" class="" type="text" value="" placeholder="dd/mm/yyyy" autocomplete="off" maxlength="10" onblur="">
                                    <img class="dob" src="images/dob_icon.png" id="dob_icon" alt="" title="" style="margin-left: -30px; margin-top: 4px;">
                                -->
                                    <span class="inline1 successMessage" id="dob_success_msg" style="display: none;"></span>
                                    <span class="inline1 errorMessage" id="dob_error_msg" style="display: none;"></span>
                                    <p class="error_msg" id="below_error_dob_msg" style="display: none;">Please enter your date of birth</p>
                                </div>

                                <div class="field_div">
                                    <label for="contact_number" id="">Contact number</label>
                                    <input id="contact_number" name="contact_number" class="frmText validate" type="tel" pattern="/d" maxlength="11" value="" autocomplete="off" onblur="return contactsvalidation()"  onkeyup="this.value=this.value.replace(/[^\d]/,'')">

                                    <span class="inline1 successMessage" id="contact_success_msg" style="display: none;"></span>
                                    <span class="inline1 errorMessage" id="contact_error_msg" style="display: none;"></span>

                                    <p class="error_msg" id="below_error_contact_msg" style="display: none;">Please enter your contact number</p>
                                </div>
                                <div class="helpEmail">
                                    We will only contact you with important information about your TV Licence and will not pass your details on to anyone else.

                                </div>

                            </div>

                            <div class="div">
                                <div class="btnGrp">
                                    <span class="arrowBtn">
                                        <input type="submit" name="submit" value="Continue" id="ctl00_Content_ctl02_btnSubmit">
                                    </span>
                                </div>
                            </div>
                        </form>

Этот код работает следующим образом.если пользователь нажимает на ввод onblur, если на входе отображается пустой крестик и отображается верхняя граница, но если пользователь исправляет ошибку, верхняя граница ошибки не исчезаетЕсли я пропущу верхнюю границу в одной проверке, то при появлении другой ошибки она исчезнет.Надеюсь, вы понимаете, о чем я. Спасибо

Более наглядный пример на сайте.проверьте валидации после отправки бланка и постарайтесь не отображать верхнюю границу.Вот ссылка на сайт: http://blockcode.info/tv/

1 Ответ

0 голосов
/ 21 декабря 2018

Я проверил ваш код, и вы проверяете вещи в каждом окне ввода.Когда проверка не пройдена, вы показываете headerErrorBox, но когда она пройдена (возвращает true), вы не устанавливаете headerErrorBox, отображать нет.

Обновление : я создалvalidations объект, чтобы сохранить статус проверки, и мы можем обновлять интерфейс каждый раз, когда входные данные 'onchange или onblur: 

 var validations = {
      title: false,
      email: false,
      first_name: false,
      last_name: false,
      dob: false,
      contact: false
    }
    function updateEmailMsg() {
      if (validations.email === true) {
        document.getElementById('email_success_msg').style.display = 'block';
        document.getElementById('email_error_msg').style.display = 'none';
        document.getElementById('top-email').style.display = 'none';
        document.getElementById('below_error_email_msg').style.display = 'none';
      } else {
        document.getElementById('below_error_email_msg').style.display = 'block';
        document.getElementById('top-email').style.display = 'block';
        document.getElementById('email_success_msg').style.display = 'none';
        document.getElementById('email_error_msg').style.display = 'block';
      }
      update();
    }
    function update() {

      if (validateAll()) {
        document.getElementById('headerErrorBox').style.display = 'none';
        return true;
      } else {
        document.getElementById('headerErrorBox').style.display = 'block';
        return false;
      }
    }

    function emailvalidate() {
      var email = document.getElementById('email').value;
      validations.email = validateEmail(email);
      updateEmailMsg();
      return validations.email;
    }

Вот демонстрационная версия jsfiddle: https://jsfiddle.net/e3xnc4h2/1/

Примечание : на самом деле это не очень хороший опыт.Лучше использовать массивы с циклом или попробуйте использовать jquery, vuejs, ... для дальнейшего развития

...