2011-12-04 4 views
0

フォーム検証では、ぼかしでデータ検証がトリガーされます。このフォームでは、私は3つの異なるonblur可能なトリガーを持っています。しかし、1つのトリガーが発生すると、2つの警告ボックスが表示されます。つまり、2つの機能がトリガーされました。javascript 1つの関数のトリガーが別の意図しない機能を起動しています

形式(HTMLコード):

function clear_fields(fieldid, confirm_fieldid){ 
     document.getElementById(fieldid).value = ""; 
     if (typeof(confirm_fieldid) !== 'undefined'){ document.getElementById(confirm_fieldid).value = ""; } 
     document.getElementById(fieldid).focus(); 
     return false; 
    } 

function validate_email(email_field_id){ 

     email = typeof(email_field_id) != 'undefined' ? document.getElementById(email_field_id) : function(){alert('Parameter error when calling Validate Email. Check your form'); return;}(); 

     var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

     if(reg.test(email.value) == false) { 

      alert('El email que ingresaste no es correcto. Por favor, intenta nuevamente siguiendo este formato [email protected]'); 

      return clear_fields(email_field_id); 

     } else { return true; } 

    } 

function confirm_email(confirm_email_field_id){ 

     var confirmemail = typeof(confirm_email_field_id) != 'undefined' ? document.getElementById(confirm_email_field_id) : function(){alert('Parameter error when calling javascript function confirm_email(). Check your form, and make sure input field for confirm email calls the function confirm_email("confirm:email_id");'); return;}(); 

     var confirmemailarray = confirmemail.id.split(':'); 

     var email = document.getElementById(confirmemailarray[1]); 

     if(email.value === confirmemail.value) {  

      return true; 

     } else { 

      alert("ERROR: \"Email\" no coincide con \"Confirmar Email\". \n Agrega tu \"Email\" y CONFIRMA este Email") 

      return clear_fields(email.id, confirmemail.id); 

     } 

    } 

function confirm_data(confirm_data_field_id){ 

     if(typeof(confirm_data_field_id) == 'undefined'){ 

      alert('Parameter error when calling javascript function confirm_data. Check your form, and make sure input field to confirm data calls the function confirm_data("confirm:data_field_id");'); 

      return; 

     } else { 

      var confirmidarray = confirm_data_field_id.split(':'); 

      thedata = document.getElementById(confirmidarray[1]); 

      confirmthedata = document.getElementById(confirm_data_field_id); 

      if(thedata.value == confirmthedata.value) return true; 
      else { 

       thedatalabel = document.getElementById('label_' + thedata.id); 
       confirmthedatalabel = document.getElementById('confirm:label_' + thedata.id); 

       alert('ERROR: Los datos que ha ingresado en los campos de informacion \n\n' + thedatalabel.innerHTML + '\n' + confirmthedatalabel.innerHTML + '\n\n NO COINCIDEN. \n\n Para proceder con su pago agregue la informacion correcta.'); 

       return clear_fields(confirmidarray[1], confirmidarray[0] + ':' + confirmidarray[1]); 

      } 

     } 

    } 

ですが、なぜでしょう:

<form id="processpayment" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<table class="paypal"> 
<tbody> 
<tr> 
<td class="etiqueta" width="50%"><label>Nombre</label></td> 
</tr> 
<tr> 
<td><input id="nombre" class="requerido" type="text" name="nombre" value="" /></td> 
</tr> 
<tr> 
<td class="etiqueta"><label>Forma de comunicación</label></td> 
</tr> 
<tr> 
<td><span id="medio" class="requerido">Skype</span></td> 
</tr> 
<tr> 
<td class="etiqueta"><label id="label_medio_id">Usuario de Skype</label></td> 
</tr> 
<tr> 
<td><input id="medio_id" class="requerido" type="text" name="medio_id" value="" /></td> 
</tr> 
<tr> 
<td class="etiqueta"><label id="confirm:label_medio_id">Verifica usuario de Skype </label></td> 
</tr> 
<tr> 
<td><input id="confirm:medio_id" class="requerido" onblur="confirm_data(this.id);" type="text" name="confirm:medio_id" value="" /></td> 
</tr> 
<tr> 
<td class="checkbox" colspan="2"><input id="warningpaypalverified" class="requerido" type="checkbox" name="warningpaypalverified" value="payment constraints acknowledged" /><label class="alerta">Pagos de tarjeta de crédito son procesados inmediatamente.<br /><br /> En caso de que use su cuenta PayPal, es necesario ser verificado por PayPal con anterioridad.<br /><a id="explain" class="explain" onclick="explain('La conversación inmediata tiene como característica el comunicarse con alguien inmediatamente.\n\nCuando PayPal no ha verificado su cuenta estos pagos toman mas de 24 horas.\n\nSi desea una conversación inmediata, pague con tarjeta de crédito.')">Por que es esto necesario</a></label></td> 
</tr> 
<tr> 
<td id="paypal" colspan="2"><input type="hidden" name="notify_url" value="http://root.com/process/listener.php" /> <input type="hidden" name="locale.x" value="es_XC" /> <input class="alldata" type="hidden" name="custom" value="" /> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="image_url" value="http://root.com/images/root_logo.png" /> <input type="hidden" name="hosted_button_id" value="THISANDTHAT" /> <input class="paypal" type="image" name="submit" src="https://www.paymentobjects.com/es_XC/i/btn/btn_buynowCC_LG.gif" alt="PayPal, la forma más segura y rápida de pagar en línea." /> <img src="https://www.paymentobjects.com/es_XC/i/scr/pixel.gif" border="0" alt="" width="1" height="1" /></td> 
</tr> 
</tbody> 
</table> 
</form> 

私はjavascriptのコードを以下のがありますか?

どのような変更が必要ですか?

はあなたにいくつかのブラウザで

答えて

1

ありがとう(フォーカスが警告ボックスに行き、その後、戻って、その後のページにあるため)、alert()はフォーカスイベントをトリガすることができます。この種の問題をデバッグするときには、何が起こっているのかを記録するためにフォーカスを混乱させないようにしてください。ログを見て、振る舞いを変更せずに実際に何が起こったのか見ることができます。console.log()

+0

これは、モバイルウェブサイト、Windowsの電話、iPhoneなどでのみ発生します...私がonblurをonchangeに変更すると、ダブルアラートまたはトリプルアラートが得られません。フォーカスが変更されていないときのonblurとonchangeの違いは何ですか? – IberoMedia

+0

alert()を置くとフォーカスが変化し、一部のブラウザではぼかしイベントが発生するという私のコメントを理解しましたか?その特定の動作はブラウザによって異なるので、あなたがそれをいくつかの場所で見ても私を驚かせることはありません。 onblurに警告を出すことは、この問題のためにブラウザにとっては悪い設計です。 – jfriend00

+0

まあ、最初は分かりませんでしたが、あなたのコメントの後に、onblurアラートで起こることを慎重に考えなければなりませんでした...はい、私は今それを取得します... onblurを持つすべてのフィールドはフォーカスの影響を受け、1つだけが選択されるため、アラートはシームレスにトリガーされますか?したがって、余分な警告ボックス?ありがとうございました。ちなみに、私はconsole.log()を使用しません...私はnewbyです...ページやどこかで私はこのユーティリティ(Chrome、Firefoxいくつかの他のブラウザ)?もう一度ありがとうございます – IberoMedia

関連する問題