如何防止表单提交直到必要的字段被填写

时间：2017-05-01 13:04:26

标签： javascript php jquery ajax forms

我有一个问答网站，有大约30个问题，网站是这样的，一次显示一个问题。当你按下一个按钮时，你只会转到下一个问题。

我有一个问题，当我点击下一个按钮时，表单会自动发送表单到php_script，然后将数据提交给数据库，

下面是jquery文件，它使表单一次显示一个问题。但问题是当单击下一个按钮（在表单元素中）时，即使其他必填字段为空，表单也会提交。

在数据库中，我最终得到第一个响应，其余的都是null或零

我非常感谢你帮助我的努力。我不知道该怎么做

 var q = 1;
$(document).ready(function() {
  var selectedOption = $('input[name=options]:checked').val();
$(".questions").hide();
$("#question1").show();

$("#next").click(function() {

  $("#question" + q).hide();
   q = q + 1;
  if(q > 30) {
    $("#next").remove();
    $("body").append("<input type='submit' value='Submit'>");
  } else {
    $("#question" + q).show();
  }
});

if ((selectedOption == '')){
e.preventDefault();
}

}）;

3 个答案:

答案 0 :(得分：1)

您当前的验证码位于：

$(document).ready(...)

在浏览器解析完所有HTML后立即执行。这不是验证表单元素的正确时间。

您需要在<form>元素的submit事件中使用此逻辑，以便您可以在合适的时间验证表单元素，然后e.preventDefault()可能会取消{{1}事件。

此外，不要将变量设置为等于HTML元素的属性值，就像使用此行一样：

submit

因为这将在那个时刻仅存储元素的值。当值稍后更改时，您的变量将不具有该数据。

即使你有正确的事情，你的实际事件取消代码：

var selectedOption = $('input[name=options]:checked').val();

不起作用，因为您没有将事件对象引用捕获为事件处理函数参数。 e.preventDefault(); 将是e。

这是您应该使用的更多结构（有关详细信息，请参阅内联注释）：

undefined

答案 1 :(得分：0)

我重新发明了一下这个轮子，原始代码在html方面有点模糊，所以我挥霍并写下了如何通过严重依赖jQuery和事件处理程序来完成类似的事情。也没有提交按钮，用jQuery处理它。

的index.html

＆＃13;
＆＃13; 
    $(function() {
	
	// Namespace to not pollute, be good to your browser environment, but still allow access from the outside
	window.QUESTIONS = window.QUESTIONS || {};
	
	// Save references, because it's not my memory, but my time
	QUESTIONS.form = $('#questionForm')
	// Disable everything from the start
	QUESTIONS.next = $('#next').prop('disabled', true);
	QUESTIONS.previous = $('#previous').prop('disabled', true);
	QUESTIONS.complete = $('#complete').prop('disabled', true);
	// We start at 1
	QUESTIONS.position = 1;
	QUESTIONS.max = 3; // Could compute this with jquery, but this is an example
	QUESTIONS.current = undefined; // The current question jquery reference
	
	// Never auto submit, but we have a way around this ;)
	QUESTIONS.form.submit (function() {
		return false; 
	});
	
	// Hide everything
	$(".question", QUESTIONS.form).hide();
		
	function checkButtons() {
		var checked = QUESTIONS.current && $('input[type=radio]:checked', QUESTIONS.current).length == 1;
		
		// Complete
		if (checked && QUESTIONS.position == QUESTIONS.max) { // Only check if set
			QUESTIONS.complete.prop('disabled', false);
		} else {
			QUESTIONS.complete.prop('disabled', true);
		}
		
		// Next
		if (checked && QUESTIONS.position < QUESTIONS.max) { // Only check if set
			QUESTIONS.next.prop('disabled', false);
		} else {
			QUESTIONS.next.prop('disabled', true);
		}
	}
	
	function activateQuestion(position) {
		// Hide the old question
		if (QUESTIONS.current) {
			QUESTIONS.current.hide();
		}
		// Save the position
		QUESTIONS.position = position - 0;
		
		// Save the reference
		QUESTIONS.current = $('.question[questionIndex=' + QUESTIONS.position + ']', QUESTIONS.form).show();
		
		// Can we go back?
		QUESTIONS.previous.prop('disabled', !(QUESTIONS.position > 1));
		
		// setup buttons
		checkButtons();
	}
	
	QUESTIONS.form.on('click', 'input[type=radio]', function(){
		// When I check something, work on buttons
		checkButtons();
	});
	
	// Stop enter from submitting
	$('.question input[type=radio]', QUESTIONS.form).keypress(function(e) {
		if(e.which == 13) {
			e.preventDefault();
		}
	});
	
	// Next event
	QUESTIONS.next.click(function() {
		activateQuestion(QUESTIONS.position + 1)
	});
	
	// Previous event
	QUESTIONS.previous.click(function() {
		activateQuestion(QUESTIONS.position - 1)
	});

	QUESTIONS.complete.click(function(){
		QUESTIONS.form[0].submit();
	});
	// Show the first
	activateQuestion(1);
	
    });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<form action="somewhere.php" id="questionForm" method="POST">
			<div class="questions">
			
				<div class="question" questionIndex="1">
					<h1>Question Title 1</h1>
					<p>
					<input type="radio" name="question1" id="question1_1" value="A"/> <label for="question1_1">Answer A</label>
					</p>
					<p>
					<input type="radio" name="question1" id="question1_2" value="B"/> <label for="question1_2">Answer B</label>
					</p>
					<p>
					<input type="radio" name="question1" id="question1_3" value="C"/> <label for="question1_3">Answer C</label>
					</p>
				</div>
				
				<div class="question" questionIndex="2">
					<h1>Question Title 2</h1>
					<p>
					<input type="radio" name="question2" id="question2_1" value="A"/> <label for="question2_1">Answer A</label>
					</p>
					<p>
					<input type="radio" name="question2" id="question2_2" value="B"/> <label for="question2_2">Answer B</label>
					</p>
					<p>
					<input type="radio" name="question2" id="question2_3" value="C"/> <label for="question2_3">Answer C</label>
					</p>
				</div>
				
				<div class="question" questionIndex="3">
					<h1>Question Title 3</h1>
					<p>
					<input type="radio" name="question3" id="question3_1" value="A"/> <label for="question3_1">Answer A</label>
					</p>
					<p>
					<input type="radio" name="question3" id="question3_2" value="B"/> <label for="question3_2">Answer B</label>
					</p>
					<p>
					<input type="radio" name="question3" id="question3_3" value="C"/> <label for="question3_3">Answer C</label>
					</p>
				</div>
			
				<button id="previous">Previous</button>
				<button id="next">Next</button>
				<button id="complete">Complete</button>
			
			</div>
		</form>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

编辑3：

修改示例以隐藏上一个问题，因此一次只显示一个问题。

编辑2：

正如Scott Marcus所指出的，我将把事件处理程序移到 app.use(function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-type'); res.setHeader('Access-Control-Allow-Headers', 'X-Signature'); res.setHeader('Access-Control-Allow-Headers', 'X-Key'); next(); } );

中

将.custom-form .form-control{ width:100%; } 按钮处理程序移到 <div class="container"> <div class="row"> <div class="col-xs-12"> <h1 class="margin-bottom-30">Get Instant Essay Writing / Editing Help</h1> </div> <!-- end col-xs-12 --> </div> <!-- end row --> <div class="row"> <form class="form-inline custom-form"> <div class="form-group col-xs-2"> <input type="text" class="form-control input-sm " placeholder="Your Title"> </div> <div class="form-group col-xs-4"> <select class="form-control input-sm"> <option value="0" selected="" disabled="">Choose Assignment Type</option> <option value="1">Essay</option> <option value="18">Admission / Scholarship Essay</option> <option value="12">Research Paper</option> <option value="26">Research Proposal</option> <option value="4">Coursework</option> <option value="2">Term paper</option> <option value="5">Article</option> <option value="22">Literature / Movie review</option> <option value="9">Reports</option> <option value="3">Dissertation</option> <option value="29">Thesis</option> <option value="30">Thesis Proposal</option> <option value="13">Creative Writing</option> <option value="11">Business Plan</option> <option value="15">Speech / Presentation</option> <option value="7">Outline</option> <option value="14">Annotated Bibliography</option> <option value="6">Dissertation Proposal</option> <option value="17">Proofreading</option> <option value="25">Paraphrasing</option> <option value="28">PowerPoint Presentation</option> <option value="27">Personal Statement</option> <option value="24">Non-word Assignments</option> <option value="23">Math Assignment</option> <option value="21">Lab Report</option> <option value="20">Code</option> <option value="19">Case Study</option> <option value="16">Other types</option> </select> </div> <div class="form-group col-xs-3"> <input type="text" class="form-control input-sm mg-up1 col-xs-3" placeholder="Your Email Address"> </div> <div class="form-group col-xs-2 mg-up"> <button type="submit" class="form-control input-sm col-xs-3">Check The Price</button> </div> </form></div> <div class="row"> <h3 class="margin-top-30">Over 7000 Writers and Editors Available 24/7 To Help You Out.</h3> </div> </div> 处理程序之外，并添加了一个.submit表单处理程序，以便您可以在那里处理表单提交。

这将帮助您使用单点代码来管理所有表单提交情况（验证，消息，清理等）

.ready

在前面的代码行中，我们检查以名称问题开头的每个问题（它匹配问题1，问题2，问题3，问题11，问题XX等），并且对于每个问题，我们测试它们的值（由用户，如果这些问题中的任何一个为空，您将阻止使用.next提交表单，如果一切正确，您只需让他们提交表单。

.document.ready
$("[id^='question']").each(function(i){

希望它有所帮助！

相关问题
最新问题