1. 首頁
  2. 問答
  3. 如何在關閉模式表單時刪除AJAX驗證錯誤

如何在關閉模式表單時刪除AJAX驗證錯誤

2016-12-25 40 views
0

聖誕快樂！如何在關閉模式表單時刪除AJAX驗證錯誤

我在刪除AJAX驗證錯誤時遇到問題。我有一個腳本，在按下「取消」按鈕後重置表單，但驗證錯誤不會消失。

這是我的模式註冊表格：

<div class="modal-dialog"> 

    <div class="modal-content"> 

     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h3 class="text-center"><i class="fa fa-user-plus" aria-hidden="true"></i> Registro</h3> 

     </div> 

     <div class="modal-body"> 

     <form action="" name="registerform" id="signup1" method="POST" role="form"> 
      <div class="row"> 

      <div class="col-xs-6"> 
       <div class="form-group"> 
        <label for="name"><i class="fa fa-user-circle" aria-hidden="true"></i> Nombres</label> 
        <input type="text" class="form-control" id="name" name="name" placeholder="Ingresa tu(s) nombre(s)"> 
        <span id="nameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span> 
       </div> 
      </div> 

      <div class="col-xs-6"> 
       <div class="form-group"> 
        <label for="lname"><i class="fa fa-user-circle" aria-hidden="true"></i> Apellidos</label> 
        <input type="text" class="form-control" id="lname" name="lname" placeholder="Ingresa tus apellidos"> 
        <span id="lnameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span> 
       </div> 
      </div> 

      </div> 

      <div class="form-group" id="genero"> 

       <div class="btn-group" data-toggle="buttons"> 

       <label for="masculino" class="btn btn-default active"> 
       <input type="radio" name="genero" id="masculino" autocomplete="off" checked value="M"> 
       Masculino 
       </label> 

       <label for="femenino" class="btn btn-default"> 
       <input type="radio" name="genero" id="femenino" autocomplete="off" value="F"> 
       Femenino 
       </label> 

       </div> 
      </div> 

       <div class="form-group"> 
        <label for="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Correo electronico</label><span id="resultmail"></span> 
        <input type="email" class="form-control" name="email" id="email" placeholder="Ingresa tu correo electronico"> 
       </div> 


       <div class="form-group"> 
        <label for="user"><i class="fa fa-user" aria-hidden="true"></i> Usuario</label><span id="result"></span> 
        <input type="text" class="form-control" name="user" id="user" placeholder="Ingresa tu usuario"> 
       </div> 


       <div class="form-group"> 
        <label><i class="fa fa-birthday-cake" aria-hidden="true"></i> Fecha de nacimiento</label> 

        <div class="row" id="fecha"> 

        <div class="col-xs-4"> 
         <select class="form-control btn-default custom" name="day"> 

           <option hidden>Dia</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> 

         </div> 




        <div class="col-xs-4"> 

         <select class="form-control btn-default custom" name="month"> 

           <option hidden>Mes</option> 

           <option value="01">Enero</option> 
           <option value="02">Febrero</option> 
           <option value="03">Marzo</option> 
           <option value="04">Abril</option> 
           <option value="05">Mayo</option> 
           <option value="06">Junio</option> 
           <option value="07">Julio</option> 
           <option value="08">Agosto</option> 
           <option value="09">Septiembre</option> 
           <option value="10">Octubre</option> 
           <option value="11">Noviembre</option> 
           <option value="12">Diciembre</option> 

          </select> 

         </div> 


        <div class="col-xs-4"> 

         <select class="form-control btn-default custom" name="year"> 
           <option hidden>Año</option> 
           <option value="2003">2003</option> 
           <option value="2002">2002</option> 
           <option value="2001">2001</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">1954</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> 
           <option value="1929">1929</option> 
           <option value="1928">1928</option> 
           <option value="1927">1927</option> 
           <option value="1926">1926</option> 
           <option value="1925">1925</option> 
           <option value="1924">1924</option> 
           <option value="1923">1923</option> 
           <option value="1922">1922</option> 
           <option value="1921">1921</option> 
           <option value="1920">1920</option> 
           <option value="1919">1919</option> 
           <option value="1918">1918</option> 
           <option value="1917">1917</option> 
           <option value="1916">1916</option> 
           <option value="1915">1915</option> 
           <option value="1914">1914</option> 
           <option value="1913">1913</option> 
           <option value="1912">1912</option> 
           <option value="1911">1911</option> 
           <option value="1910">1910</option> 
           <option value="1909">1909</option> 
           <option value="1908">1908</option> 
           <option value="1907">1907</option> 
           <option value="1906">1906</option> 
          </select> 
         </div> 
         </div> 
        </div> 
       <div class="form-group"> 
        <label for="password"><i class="fa fa-eye" aria-hidden="true"></i> Contrasena</label> 
        <input type="password" class="form-control" id="password" name="password" placeholder="Ingresa tu contrasena"> 
        <span id="passerror" class="hidden form-error"><p> *Debe ser mayor a 5 caracteres </p></span> 
       </div> 


       <div class="form-group"> 
        <label for="cpassword"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Confirma tu contrasena</label> 
        <input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Vuelve a ingresar tu contrasena"> 
        <span id="cpasserror" class="hidden form-error"><p> *Debe coincidir con tu contrasena</p> </span> 
       </div> 





     </div> 

     <div class="modal-footer"> 

      <input type="submit" id="btnregistrar" name="register" class="btn btn-default" value="Registrar"></input> 

      <button type="button" id="btncerrar1" id="reset" class="btn btn-default" data-dismiss="modal">Cerrar</button> 


     </div> 
</form> 
    </div> 

</div>

這是我的電子郵件check.php文件：

<?php 

$host="localhost"; 
$user="root"; 
$pass=""; 
$dbname="lr"; 

$dbcon = new PDO("mysql:host={$host};dbname={$dbname}",$user,$pass); 

if($_POST['email']) 
{ 
    $email = strip_tags($_POST['email']); 

    $stmt=$dbcon->prepare("SELECT email FROM users WHERE email=:email"); 
    $stmt->execute(array(':email'=>$email)); 
    $count=$stmt->rowCount(); 

    if($count>0){ 

    echo "<i class='fa fa-circle user-validation-w' aria-hidden='true'></i><span class='availability'> Not Available</span>"; // No disponible 

} else { 

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 

     echo "<i class='fa fa-circle user-validation-w pull-right' aria-hidden='true'></i><span class='availability pull-right'> Ingresa un correo valido</span>"; // Correo invalido 

    } else if ($email = "") { 

     echo "HOLA"; // No hay caracteres 

    }else{ 

    echo "<i class='fa fa-circle user-validation-ok pull-right' aria-hidden='true'></i><span class='availability pull-right'> Available</span>"; // Disponible 
} 
} 
} 
?>

這是我的用戶check.js文件

// Validate email while typing 

$(document).ready(function() 
{  
$("#email").keyup(function() 
{ 
var email = $(this).val(); 

if (email.length > 3) 
{ 
$("#resultmail").html('<i class="fa fa-circle-o-notch fa-spin loading-icon"></i>'); 


/*$.post("email-check.php", $("#reg-form").serialize()) 
.done(function(data){ 
$("#resultmail").html(data); 
});*/ 

$.ajax({ 

type : 'POST', 
url : 'email-check.php', 
data : $(this).serialize(), 
success : function(data) 
    { 
      $("#resultmail").html(data); 
     } 
}); 
return false; 

} 
else 
{ 
    $("#resultmail").html(''); 
} 

}); 


});

而這是我的清潔R-modal.js文件，該文件重置表單字段：

// Clear modal after closing function 
$(document).ready(function() { 
$('.modal').on('hidden.bs.modal', function(){ 
    $(this).find('form')[0].reset(); 
}); 
});

我知道，因爲我纔剛剛開始，但到目前爲止它的工作對我來說有些事情可能是錯的。一旦關閉模式，我無法讓錯誤消失。你介意幫助我嗎？

PD：有些詞是西班牙語，因爲我來自南美洲。

非常感謝！

來源

2016-12-25 Diego Rios

回答

0

您的驗證是手動（您創建的錯誤自己），所以你也應該通過自己在「清除」功能刪除它們：

$(document).ready(function() { 
    $('.modal').on('hidden.bs.modal', function(){ 
     $(this).find('form')[0].reset(); 
     $(this).find("i[class*='user-validation-'],span.availability").remove(); 
    //remove all <i> with class containing 'user-validation-' and all span.availability 
    }); 
});

，你也可以簡單地添加$("#resultmail").empty();由於錯誤進入該分區。

來源

2016-12-25 07:14:05

+0

我剛試過。在我關閉並重新打開模態窗體後，雖然表單爲空，但仍然顯示錯誤。 –

+0

你試過'$（「＃resultmail」）。empty（）;'？ –

+0

Nvm。我拼錯了一個字。工作很棒。非常感謝你！ –

相關問題

 相關問題