電子メールが入力されたが有効な電子メールではない場合にのみメッセージを表示する電子メールの妥当性確認

Question

電子メールアドレスが入力されていても有効ではないというメッセージを表示します。値が入力されていなければ、私はメッセージを表示したくない - ちょうど入力枠線を赤にする。

私はこれを試してみましたが、それはフィールドが空の場合でも、メッセージを示しています

function validateEmail($email) { 
 
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
 
    return emailReg.test($email); 
 
} 
 
if($(element).hasClass('email')) { 
 
    if(!validateEmail($('.email'))) { 
 
    $('<span>Please enter a valid email address</span>').insertAfter($(element)); 
 
    } 
 
}

私もqjeuryの検証プラグインで試してみましたが、この場合には、それはで電子メールのエラーが表示されませんすべて：

var emails = ['email']; 
 
for(var i=0;i< emails.length;i++) { 
 
    var email = emails[i]; 
 
    rules[email] = {}; 
 
    rules[email].email = true; 
 
    rules[email].required = true; 
 
    msgs[email] = { 
 
    required:'', 
 
    email : "Please enter a valid email address", 
 
    } 
 
} 
 

 
var validateObj   = {} 
 
validateObj["rules"]  = rules; 
 
validateObj["messages"] = msgs; 
 
validateObj["onkeyup"] = function(element) { $(element).valid();}; 
 
validateObj["success"] = function(element) {}; 
 
validateObj["submitHandler"] = function (form) { 
 
    form.submit(); 
 
} 
 
$("#form").validate(validateObj);

Answer 1

私は自分でそれを行うにしようとしなかった人を助けてるように私は本当に感じて...

あなたは、あなたの入力が空であるかどうかをテストする($(element).val())を使用することができます。この1つは機能するために

、単に色の境界にempty-emailクラスを宣言

if($(element).hasClass('email')) { 
    if($(element).val()){ 
     if(!validateEmail($(element))) { 
      $('<span>').text('Please enter a valid email address').insertAfter($(element)); 
     } 
    }else{ 
     $(element).addClass('empty-email'); 
    } 
} 

Answer 2

私はjqueryの検証を使用して私の場合は解決策を見つけた：

var emails = ['email']; 
 
for(var i=0;i< emails.length;i++) { 
 
    var email = emails[i]; 
 
    rules[email] = {}; 
 
    rules[email].email = true; 
 
    rules[email].required = true; 
 
    msgs[email] = {}; 
 
    msgs[email] = { 
 
    required:'', 
 
    email : "Please enter a valid email address", 
 
    } 
 
} 
 

 
if($(element).hasClass('email')) { 
 

 
    error.insertAfter($(element)); 
 

 
} 
 

 
};