Блог

Привет, ребята. В настоящее время я использую очень неэффективный скрипт для проверки моих форм. Код является массивным.

Идея заключается в том, что если поле ввода пустое, метка ввода выделяется красным, а div в верхней части формы отображает информацию об ошибке.

 function new_receiver(){


if (document.getElementById("RecieversName").value ==""){ //First Name

        var txt=document.getElementById("error_receiver");
        txt.innerHTML="<p><font color="#FF0000">You need to enter a Name!</font></p>";    
        window.document.getElementById("RecieversName_label").style.color = '#FF0000';

        //Reset
        window.document.getElementById("receiver_check_label").style.color = '#000000';
        window.document.getElementById("RecieversNumber_label").style.color = '#000000';
        window.document.getElementById("RecieversEmail_label").style.color = '#000000';

}else if (document.getElementById("RecieversNumber").value ==""){ //First Name

        var txt=document.getElementById("error_receiver");
        txt.innerHTML="<p><font color="#FF0000">You need to enter a Phone Number!</font></p>";    
        window.document.getElementById("RecieversNumber_label").style.color = '#FF0000';

        //Reset
        window.document.getElementById("receiver_check_label").style.color = '#000000';
        window.document.getElementById("RecieversName_label").style.color = '#000000';
        window.document.getElementById("RecieversEmail_label").style.color = '#000000'

}else if (document.getElementById("RecieversNumber").value ==""){ //First Name

        var txt=document.getElementById("error_receiver");
        txt.innerHTML="<p><font color="#FF0000">You need to enter an Email!</font></p>";  
        window.document.getElementById("RecieversEmail_label").style.color = '#FF0000';

        //Reset
        window.document.getElementById("receiver_check_label").style.color = '#000000';
        window.document.getElementById("RecieversName_label").style.color = '#000000';
        window.document.getElementById("RecieversNumber_label").style.color = '#000000';


}else{
from.receiver.submit();
  

}’

Есть идеи или методы, как упростить этот процесс, поскольку некоторые из моих форм содержат до 9 полей ввода, а этот метод проверки является массовым!

Приветствую, ребята!!!

Сэмюэль.

Я предлагаю что-то вроде этого:

 function new_receiver() {
    var inputs = [
        {
            id: "RecieversName",
            name: "a Name"
        },
        {
            id: "RecieversNumber",
            name: "a Phone Number"
        }
        // add more here
    ],
    length = inputs.length,
    error = document.getElementById("error_receiver"),
    hasError = false,
    i;

    // reset
    for (i = 0; i < length; i  ) {
        document.getElementById(inputs[i].id   "_label").style.color = "#000000";
    }
    error.innerHTML = "";

    for (i = 0; i < length; i  ) {
        if (document.getElementById(inputs[i].id).value == "") {
            error.innerHTML = "<p><font color="#FF0000">You need to enter "   inputs[i].name   "!</font></p>";    
            document.getElementById(inputs[i].id   "_label").style.color = "#FF0000";
            hasError = true;
            break;
        }
    }

    if (!hasError) {
        from.receiver.submit();
    }
}
  

Вы можете начать, попробовав что-то вроде этого

  $('input').blur(function() {
     if($(this).val()==""){
            $("#error_receiver").html("<p><font color="#FF0000">This field is required!");
            $("label[for='   this.attr("id")   ']").css('color', '#FF0000');
         }
  });
  

Вот предложение без jQuery

 <form onsubmit="return new_receiver()">
.
.

var formFields = {
  "RecieversName": "You need to enter a Name!",
  "RecieversNumber":"You need to enter a Number!",
  "RecieversEmail":"You need to enter an Email!"   
}
function new_receiver(){
  var txt=document.getElementById("error_receiver");
  //Reset
  txt.innerHTML="";
  for (var o in formFields) document.getElementById(o "_label").style.color = '#000000';

  for (var o in formFields) {
    if (document.getElementById(o).value ==""){ 
      txt.innerHTML="<p><font color="#FF0000">" formFields[o] "</font></p>";    
      window.document.getElementById(o "_label").style.color = '#FF0000';
      return false;
    }
  }
  return true
}  
  

вы можете использовать плагин проверки jqueryhttp://bassistance.de/jquery-plugins/jquery-plugin-validation /