Question

我正在尝试创建一个网站，其中有3个字段带有默认值。如果填写了所有字段，我想要一个警告弹出说“确定”，它会带你到一个新网站。如果他们留空或没有回答，我想要一个警告说要填写所有字段。问题是，无论在哪个领域，我都会得到“再试一次”警报。

我的JS -

$(function() {
		// when the text field gets focus it gets ride of the default value
		//:text makes the browser check for ALL text fields
		$(':text').focus(function() {
			console.log('got focus');
			var field = $(this);
			//basically asks - is it blank? if not, put default value in
			if (field.val()==field.prop('defaultValue')) { 
				field.val(''); 
			} 
		}); 
		
		$(':text').blur(function() {
			console.log('lost focus');
			var field = $(this);
			
			//basically asks - is it blank? if not, put default value in
			if (field.val()=='') { 
				field.val(field.prop('defaultValue'));				
			} 
		}); 
	
		//not working....
		$("#questionform").submit(function() {
			
			if ($("#question1").val() === "" || $("#question1").prop('defaultValue')) {
				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');
				
			}
			
					if ($("#question2").val() === "" || $("#question2").prop('defaultValue')) {
				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');
				
			}
			
					if ($("#question3").val() === "" || $("#question3").prop('defaultValue')) {
				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');
				
			}
		});		
		
						
	 }); // 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"。所以，第二个条件永远是真的。这就是为什么它总会给出错误消息。删除该条件或更新条件。我希望它可以帮助你。

Answer 2

你的问题是＆＃34;如果＆＃34;条件。在JS中，如果你想拥有＆＃34;如果＆＃34;有两个条件的陈述，你应该把每个条件放在每个＆＃34; ||＆＃34;操作者：

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

需要一个弹出窗口说明表单是否有效 - 无论如何都无效

2 个答案: