很多时候,我们注册的时候没有实时的验证邮箱,等点击注册之后,发现用户名或者邮箱已经被注册过了,导致我们很多东西都要再填一遍,如果加上实时验证,对于用户来说,无疑是提高了用户体验。下面我们来告诉你如何在virtuemart的注册页面添加ajax验证。

  1. File Path: /administrator/components/com_virtuemart/html/checkout_register_form.php change

    $missing = vmGet( $_REQUEST, "missing", "" );
    
    if (!empty( $missing )) {
    	echo "<script type=\"text/javascript\">alert('".$VM_LANG->_('CONTACT_FORM_NC',false)."'); </script>\n";
    }
    to
    $missing = vmGet( $_REQUEST, "missing", "" );
    
    ?>
    
    <script language="javascript" type="text/javascript">
    	
    	function getUsername(){
    		var form = document.adminForm;
    		var uname = form.username.value;
    		
    		if( !$('username_ticker') )
    			$('username_input').innerHTML	= $('username_input').innerHTML + "<div id=\"username_ticker\" style=\"padding-top:10px;\"></div>";
    		
    		$('username_field').value	= uname;
    		
    		if( form.username.value.length < 3 ) {
    			$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Username : This input value is not valid.</span>';						
    		} else {
    			$('username_ticker').innerHTML	= "<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking";
    			var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=uname';
    			url = url + '&uname=' + form.username.value;
    			
    			new Ajax(url, {
    					method: 'get',
    					onComplete: function(x){
    						if(x == 1) {
    							$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This username is already registered.</span>';							
    						} else {
    							$('username_ticker').innerHTML = '<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The username \''+ $('username_field').value +'\' is free for registration: you can proceed.</span>';
    						}						
    					}					
    				}).request();
    		
    		}
    	}
    	
    	
    	function getEmail(){
    		
    		var form = document.adminForm;
    		var eadd = form.email.value;
    		
    		if( !$('email_ticker') )
    			$('email_input').innerHTML	= $('email_input').innerHTML + "<div id=\"email_ticker\" style=\"padding-top:10px;\"></div>";
    		
    		$('email_field').value	= eadd;
    		
    		if( !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(form.email.value))) {
    			$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Email : This input value is not valid.</span>');						
    		} else {
    			$('email_ticker').setHTML("<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking");
    			var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=email';
    			url = url + '&email=' + form.email.value;
    			
    			new Ajax(url, {
    					method: 'get',
    					onComplete: function(x){
    						if(x == 1) {
    							$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This email is already registered.</span>');							
    						} else {
    							$('email_ticker').setHTML('<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The email \''+ $('email_field').value +'\' is free for registration: you can proceed.</span>');
    						}						
    					}					
    				}).request();
    
    		}
    	}
    	
    
    	
    </script>
    <?php
    
    if (!empty( $missing )) {
    	echo "<script type=\"text/javascript\">alert('".$VM_LANG->_('CONTACT_FORM_NC',false)."'); </script>\n";
    }
    

  2. File Path: /administrator/components/com_virtuemart/classes/ps_userfield.php change

    case 'password':
    case 'password2':
    echo '<input type="password" id="'.$field->name.'_field" name="'.$field->name.'" size="30" class="inputbox" />'."\n";
    break;
    to
    case 'email':
    	$maxlength = $field->maxlength ? 'maxlength="'.$field->maxlength.'"' : '';
    	echo '<input type="text" id="'.$field->name.'_field" name="'.$field->name.'" size="'.$field->size.'" onchange="getEmail();" value="'. ($db->sf($field->name, true, false)?$db->sf($field->name, true, false):'') .'" class="inputbox" '.$maxlength . $readonly . ' />'."\n";
    	break;
    case 'username':
    	$maxlength = $field->maxlength ? 'maxlength="'.$field->maxlength.'"' : '';
    	echo '<input type="text" id="'.$field->name.'_field" name="'.$field->name.'" size="'.$field->size.'" onchange="getUsername();" value="'. ($db->sf($field->name, true, false)?$db->sf($field->name, true, false):'') .'" class="inputbox" '.$maxlength . $readonly . ' />'."\n";
    	break;

  3. File Path: /administrator/components/com_virtuemart/classes/ps_userfield.php after this line

    /**
    * This is the most important part of this file
     * Here we print the field & its contents!
    */
    add the code below
    ?>
             
    <script language="javascript" type="text/javascript">		
    
    function getUsername(){
    	var form = document.adminForm;
    	var uname = form.username.value;
    	
    	if( !$('username_ticker') )
    		$('username_input').innerHTML	= $('username_input').innerHTML + "<div id=\"username_ticker\" style=\"padding-top:10px;\"></div>";
    	
    	$('username_field').value	= uname;
    	
    	if( form.username.value.length < 3 ) {
    		$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Username : This input value is not valid.</span>';						
    	} else {
    		$('username_ticker').innerHTML	= "<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking";
    		var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=uname';
    		url = url + '&uname=' + form.username.value;
    		
    		new Ajax(url, {
    				method: 'get',
    				onComplete: function(x){
    					if(x == 1) {
    						$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This username is already registered.</span>';							
    					} else {
    						$('username_ticker').innerHTML = '<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The username \''+ $('username_field').value +'\' is free for registration: you can proceed.</span>';
    					}						
    				}					
    			}).request();
    	
    	}
    }
    
    
    function getEmail(){
    	
    	var form = document.adminForm;
    	var eadd = form.email.value;
    	
    	if( !$('email_ticker') )
    		$('email_input').innerHTML	= $('email_input').innerHTML + "<div id=\"email_ticker\" style=\"padding-top:10px;\"></div>";
    	
    	$('email_field').value	= eadd;
    	
    	if( !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(form.email.value))) {
    		$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Email : This input value is not valid.</span>');						
    	} else {
    		$('email_ticker').setHTML("<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking");
    		var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=email';
    		url = url + '&email=' + form.email.value;
    		
    		new Ajax(url, {
    				method: 'get',
    				onComplete: function(x){
    					if(x == 1) {
    						$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This email is already registered.</span>');							
    					} else {
    						$('email_ticker').setHTML('<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The email \''+ $('email_field').value +'\' is free for registration: you can proceed.</span>');
    					}						
    				}					
    			}).request();
    
    	}
    }	
    </script>
    <?php
    

  4. File Path: /components/com_virtuemart/virtuemart.php after this line

    global $mosConfig_absolute_path, $product_id, $vmInputFilter, $vmLogger;
    add the code below
    $tasked = JRequest::getVar( 'tasked' );
    
    if($tasked=="chkuserinfo"){
    	$database 	= & JFactory::getDBO();
    	$email 		= JRequest::getVar( 'email' );
    	$uname 		= JRequest::getVar( 'uname' );
    	
    	$what 		= JRequest::getVar( 'what' );
    	
    	$usercount 	= 0;
    	$emailcount = 0;
    	
    	
    	if($what == "uname"){
    		$database->setQuery("SELECT COUNT(*) FROM #__users WHERE username='$uname'");
    		$usercount	= $database->loadResult();
    		if($usercount)
    			echo "1";
    		else 
    			echo "0";
    		
    	} else if ($what == "email") {	
    		$database->setQuery("SELECT COUNT(*) FROM #__users WHERE email='$email'");
    		$emailcount	= $database->loadResult();	
    		
    		if($emailcount)
    			echo "1";
    		else 
    			echo "0";
    	}
    	
    	
    	die();
    }

Last, upload the wait.gif into the /images directory on your server.