如何在JQuery對話框中進行驗證？

Question

我想在我的對話框中進行驗證。一個是空驗證，另一個是電子郵件驗證。

if (emailAndPasswordCheck) { 
    $("#dialog-modal").dialog({ 
     height: 160, 
     closeOnEscape: false, 
     modal: true 
    }); 
} 

Answer 1

好吧，您的電子郵件驗證是空的驗證碼是爲PHP文件 也下載jquery從提到的版本的一些鏈接 - jquery-1.9.1.js。創建一個ABC，JS abc.js

  <script type="text/javascript" src="JScript/jquery-1.9.1.js"> </script> 
      <script type="text/javascript" src="JScript/newempcontact.js"></script> 
     <span id="validate_msg"></span> 
     <label id="lbl_frstname">* First Name :</label> 
     <input class="hover" type="text" id="txt_firstname" minlength="1" maxlength="26" placeholder="First Name"/> 
     <span class="sfirstname"></span> 


     <label id="lbl_pemail">* Personal Email :</label> 
     <input class="hover" type="text" id="txt_pemail" placeholder="Personal Email"/> 
     <span class="spemail"></span> 

您可以將任何地方.. 再創建一個PHP文件與任何名義說abc.php

<?php 

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

if(filter_var($email, FILTER_VALIDATE_EMAIL) == false){ 
    echo "This is not valid email id!"; 
}else{ 
    echo "This is valid email id!"; 
}; 
} 

?> 

和你abc.js文件如： -

$(document).ready(function() { 

$('#slct_pstate, #slct_tstate').bind('change click scroll ',function(e) { 
    fill_cities(); 
}); 
$('#slct_tstate').bind('change click scroll ',function(e) { 
    fill_cities(); 
}); 

email_validation() 

//您的形式代替form_nempcontact名稱 -

$('#submit').click(function() { 
     submit_fxn(); 
     $('#form_nempcontact').submit(function(e) { 
      return false; 
     }); 
}); 


}); 

function email_validation(){ 
    $('#txt_pemail').focusin(function(e) { 

if($('#txt_pemail').val() == ''){ 

    $('span.spemail').text('Go for valid email address').addClass('validatectrl');; 

} 
else{ 
    emailvalidattion($('#txt_pemail').val()); 
} 
}).blur(function(e) { 
    $('span.spemail').html(''); 
}).keyup(function(e) { 
    emailvalidattion($('#txt_pemail').val()); 

}); 
};//**** 

    function emailvalidattion(email){ 
    $.post('PHP/check.php', {email:email}, function(result){ 
    $('span.spemail').text(result).addClass('validatectrl'); 
}); 
};//** 


function submit_fxn(){ 

    var check_flag = 0; 
      var fname = $('#txt_firstname'); 
      var fname_val = fname.val(); 
      var fname_dftlngth = fname.attr('minlength'); 
      var fname_usrdftlngth = fname_val.length; 

    if(fname_usrdftlngth == 0 || fname_usrdftlngth < fname_dftlngth){ 
     $(fname).css({ 
     "background-color":"#FF0000", 
     "border":"soild 2px yellow" 

     }); 

     check_flag = 1; 


    }else{ 
     $(fname).css({ 
     "background-color":"#FFFFFF" 


     }); 


    } 
    if(check_flag == 1){    
     $("#form_nempcontact").submit(function() { 
       $("#validate_msg").text(''); 


     }); 
    } 
      if(check_flag == 0){ 

      //---Write your code here 

       } 
    }; 

//你的CSS代碼 -

 p.validate_msg { 
      border: 1px solid #FF0000; 
      font-weight: bold; 
      padding: 10px; 
     display:none; 
    margin-bottom:25px; 
    color:#FFFF00; 

    } 
     span.validatectrl, p.validatectrl { 

    color:#FFFF00; 
    font-family:"Times New Roman", Times, serif; 
    font-size:14px; 
    padding-left:8px; 
} 

     span.validatectrlgreen { 
color:#090; 
padding-left:8px; 
font-style:italic; 
    } 

如果這個答案是正確的，請把它標記爲一個答案

Answer 2

jQuery validation plugin一般都很受好評和易於使用。