フォームが有効かどうかを示すポップアップが必要です - 何があっても無効です。

Question

デフォルト値の3つのフィールドがあるサイトを作成しようとしています。すべてのフィールドが入力されている場合、「ok」とポップアップする警告が表示され、新しいサイトが表示されます。彼らが空白のままになっている、または答えられていない場合、私はすべてのフィールドを記入するよう警告が欲しい。問題は、フィールドに何があっても、私は "再試行"アラートを得ることです。

私のJS -

$(function() { 
 
\t \t // when the text field gets focus it gets ride of the default value 
 
\t \t //:text makes the browser check for ALL text fields 
 
\t \t $(':text').focus(function() { 
 
\t \t \t console.log('got focus'); 
 
\t \t \t var field = $(this); 
 
\t \t \t //basically asks - is it blank? if not, put default value in 
 
\t \t \t if (field.val()==field.prop('defaultValue')) { 
 
\t \t \t \t field.val(''); 
 
\t \t \t } 
 
\t \t }); 
 
\t \t 
 
\t \t $(':text').blur(function() { 
 
\t \t \t console.log('lost focus'); 
 
\t \t \t var field = $(this); 
 
\t \t \t 
 
\t \t \t //basically asks - is it blank? if not, put default value in 
 
\t \t \t if (field.val()=='') { 
 
\t \t \t \t field.val(field.prop('defaultValue')); \t \t \t \t 
 
\t \t \t } 
 
\t \t }); 
 
\t 
 
\t \t //not working.... 
 
\t \t $("#questionform").submit(function() { 
 
\t \t \t 
 
\t \t \t if ($("#question1").val() === "" || $("#question1").prop('defaultValue')) { 
 
\t \t \t \t alert("Please fill out all fields"); 
 
\t \t \t \t // since there is invalid input returning false will keep us from navigating to the new form 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t // input is valid so we'll navigate to the new form 
 
\t \t \t \t alert('Okay'); 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t \t \t if ($("#question2").val() === "" || $("#question2").prop('defaultValue')) { 
 
\t \t \t \t alert("Please fill out all fields"); 
 
\t \t \t \t // since there is invalid input returning false will keep us from navigating to the new form 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t // input is valid so we'll navigate to the new form 
 
\t \t \t \t alert('Okay'); 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t \t \t if ($("#question3").val() === "" || $("#question3").prop('defaultValue')) { 
 
\t \t \t \t alert("Please fill out all fields"); 
 
\t \t \t \t // since there is invalid input returning false will keep us from navigating to the new form 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t // input is valid so we'll navigate to the new form 
 
\t \t \t \t alert('Okay'); 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t }); \t \t 
 
\t \t 
 
\t \t \t \t \t \t 
 
\t }); // end ready

そして、私のHTML - どんなに私がやるか、いずれかのボックスを入力していないものを

<form action="success.html" id="questionform"> 
<label for="question1" class="label">Enter your first name</label> 
     <br> 
    <input type="text" value="Question" id="question1"> 
     <br> 

<label for="question2" class="label">Enter your last name</label> 
     <br> 
    <input type="text" value="Question" id="question2"> 
     <br>   

<label for="question3" class="label">Enter your favorite color</label> 
     <br> 
    <input type="text" value="Question" id="question3"> 
<br> 

<input type='submit' value='Submit' name="submit" id='submitme'> 

</form> 
<p id="result"></p> 

、それがアップします無効で、次の画面には移動しません。

Answer 1

ifに問題があります。

if ($("#question1").val() === "" || $("#question1").prop('defaultValue') === $("#question1").val()) { 
       alert("Please fill out all fields"); 
       // since there is invalid input returning false will keep us from navigating to the new form 
       return false; 
    } else { 
       // input is valid so we'll navigate to the new form 
      alert('Okay'); 

    } 

$("#question1").prop('defaultValue')がvalue="Question"として入力要素で定義されたデフォルト値を返しますので、このようなものを使用してください。したがって、2番目の条件は常に真です。そのため、常にエラーメッセージが表示されます。その条件を削除するか、条件を更新してください。 私はそれがあなたを助けてくれることを願っています。

Answer 2

"if"条件に問題があります。 JS内の の2つの条件で "if"文を使用する場合は、それぞれの "||"演算子：

if (x == y || x == z)