Проверка подлинности JQuery на форме отправки

Question

Я хочу, чтобы соответствующее сообщение об ошибке отображалось, когда поля ввода пусты на кнопке отправки, но мой код ниже дает мне первое сообщение об ошибке: «Пожалуйста, введите вопрос». Где я делаю неправильно

Ниже Мой HTML и JQuery код: HTML:

<form enctype="multipart/form-data" onsubmit=" return ValidateForm(this)" class="form-horizontal" id="PollIndexForm" method="post" action="/polls" accept-charset="utf-8"> 

<textarea name="data[Question][question]" id="message1" maxlength="50" onKeyup="return update()" ></textarea> 
<span class="validate" id="validatemessage1"></span>  

<input name="data[Option][optiona][]" id="optiona" type="text" class="form-control"> 
<span class="validate" id="validateoptiona"></span> 

<input name="data[Option][optiona][]" id="optionb" type="text" class="form-control"> 
<span class="validate" id="validateoptionb"></span> 


<input class="btn btn-lg btn-primary" type="submit" value="Save" />   

Jquery:

<script> 
$(document).ready(function(){ 

$("#message1").keypress(function(){ 
    $("#validatemessage1").hide(); 
}); 


$("#optiona").keypress(function(){ 
    $("#validateoptiona").hide(); 
}); 



$("#optionb").keypress(function(){ 
    $("#validateoptionb").hide(); 
}); 



$("#optionc").keypress(function(){ 
    $("#validateoptionc").hide(); 
}); 



$("#optiond").keypress(function(){ 
    $("#validateoptiond").hide(); 
}); 



$("#autoreply").keypress(function(){ 
    $("#validateautoreply").hide(); 
}); 



}); 

function ValidateForm(form){ 

var message1=document.getElementById("message1").value; 
if(message1==''){ 
    $(".validate").html("Please enter a question").addClass("ValidationErrors"); 
    return false; 
    } 

var optiona=document.getElementById("optiona").value; 
if(optiona==''){ 
    $(".validate").html("Please enter option A").addClass("ValidationErrors"); 
    return false; 
    } 

var optionb=document.getElementById("optionb").value; 
if(optionb==''){ 
    $(".validate").html("Please enter option B").addClass("ValidationErrors"); 
    return false; 
    } 

var optionc=document.getElementById("optionc").value; 
if(optionc==''){ 
    $(".validate").html("Please enter option C").addClass("ValidationErrors"); 
    return false; 
    } 

var optiond=document.getElementById("optiond").value; 
if(optiond==''){ 
    $(".validate").html("Please enter option D").addClass("ValidationErrors"); 
    return false; 
    } 



var autoreply=document.getElementById("autoreply").value; 
if(autoreply==''){ 
    $(".validate").html("Please enter a autoreply message").addClass("ValidationErrors"); 
    return false; 
    } 


} 
</script> 

Answer 1

Если я правильно понимаю, у вас есть проблема, потому что выполняется только первая проверка (по крайней мере, это был случай, когда я попробовал свой код на своем ПК).

Что я предлагаю, так это то, что вы используете jQuery во всех местах (потому что вы, очевидно, можете, так как частично), поэтому мое предложение следующее. HTML:

<textarea name="data[Question][question]" id="message1" maxlength="50"" ></textarea> 
<span class="validate" id="validatemessage1">validatemessage1</span>  
</br> 
<input name="data[Option][optiona][]" id="optiona" type="text" class="form-control"> 
<span class="validate" id="validateoptiona">validateoptiona</span> 
</br> 
<input name="data[Option][optiona][]" id="optionb" type="text" class="form-control"> 
<span class="validate" id="validateoptionb">validateoptionb</span> 


<input id="submitbtn" class="btn btn-lg btn-primary" type="submit" value="Save" /> 

JavaScript:

$(document).ready(function(){ 
      $("#message1").keyup(function(){ 
       console.log("validate"); 
       $("#validatemessage1").hide(); 
      }); 
      $("#optiona").keyup(function(){ 
       $("#validateoptiona").hide(); 
      }); 
      $("#optionb").keyup(function(){ 
       $("#validateoptionb").hide(); 
      }); 

      $("#submitbtn").on("click", function(e){ 
       if(ValidateForm(("#PollIndexForm")) == false){return false} else {return true}; 
      }); 

      function ValidateForm(form){ 
       var end = true; 
       var message1=$("#message1").val(); 
       console.log("message1: "+message1+"x"+message1.length); 
       if(message1.length==0){ 
        $("#validatemessage1").html("Please enter a question").addClass("ValidationErrors"); 
        $("#validatemessage1").show(); 
        end = false; 
       } 
       var optiona=$("#optiona").val(); 
       if(optiona==''){ 
        $("#validateoptiona").html("Please enter option A").addClass("ValidationErrors"); 
        $("#validateoptiona").show(); 
        end = false; 
       } 
       var optionb=$("#optionb").val(); 
       if(optionb==''){ 
        $("#validateoptionb").html("Please enter option B").addClass("ValidationErrors"); 
        $("#validateoptionb").show(); 
        end = false; 
       } 
       return end; 
      } 
     }); 

Таким образом, вы будете обрабатывать кнопку отправки с помощью JQuery и вызов функции ValidateForm каждый раз при нажатии кнопки. Кроме того, если вы очистили поле до ввода, сообщение не отобразилось, потому что оно было скрыто, а последующая функция .html() только меняет его значение, поэтому вам нужно снова показать его .show().