需要更正此表单验证

Question

我有一个小的形式，在默认情况下，第一个字段(标题)是必需的。第二和第三只在特定情况下才需要。

案例I:如果工具名称被填写，工具名和工具URL都成为必需的。案例二:如果工具URL被填写，工具名和工具URL都成为必需的。

我不确定它是否如预期的那样起作用。你能帮我改正我的密码吗？

​

$(document).ready(function(){
			articleTitle = $('#title').val();
			toolName = $('#toolName').val().trim();
			toolURL = $('#toolURL').val();
			
			
			
			if(((toolName.length>0)&&(toolURL==="")) || ((toolName.length<=0)&&(toolURL!==""))){
			
				$('#toolName').prop('required', true);
				$('#toolURL').prop('required' , true);
				
							
			} else {
				$('#toolName').prop('required', false);
				$('#toolURL').prop('required', false);
		}
			
			
			$("#myForm").submit(function(){
    
				sayHello();
				return false;
			});
			
		});

label {
  float: left;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="myForm">
  <label for="title">Title:</label> <input type="text" id="title" required> <br /><br />
  <label for="toolName">Tool Name: </label><input type="text" id="toolName"> <br /> <br />
  <label for="toolURL">Tool URL: </label><input type="url" id="toolURL"> <br /> <br />
  <button>Submit</button>
</form>

​

Answer 1

您可以简化您的代码相当多，请参阅注释的描述。

​

var $toolName = $('#toolName')
var $toolURL = $('#toolURL')
var $toolInputs = $($toolName).add($toolURL)

function sayHelloToMyLittleFriend() {
  alert('sup! form was submitted')
}

$toolInputs.on('change', function(e) {

  var toolName = $toolName.val()
  var toolURL = $toolURL.val()
  
  $toolInputs.prop('required', toolName || toolURL)
})

$('form').submit(function(e) {
  var toolName = $toolName.val()
  var toolURL = $toolURL.val()
  
  var bothFilled = !!toolName && !!toolURL
  var noneFilled = !toolName && !toolURL
  
  if (bothFilled || noneFilled) {
    sayHelloToMyLittleFriend()
    return true
  }
  return false
})

label {
  float: left;
  width: 100px;
}
/* this will show what element has the required attribute */
[required] {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="myForm">
  <label for="title">Title:</label> <input type="text" id="title" required> <br /><br />
  <label for="toolName">Tool Name: </label><input type="text" id="toolName"> <br /> <br />
  <label for="toolURL">Tool URL: </label><input type="url" id="toolURL"> <br /> <br />
  <button>Submit</button>
</form>

​

Answer 2

下面是一种简单的使用库的方法--没有javascript (而不是jQuery)。

(尽管如此，您将看到它非常类似于jQuery)。

每当数据被输入或从表单中移除时，表单输入都会被检查，并在适当的情况下添加或删除required属性。

​

var myForm = document.getElementById('myForm');
var toolName = document.getElementById('toolName');
var toolURL = document.getElementById('toolURL');

function checkInputs() {
    if ((toolName.value !== '') || (toolURL.value !== '')) {
        toolName.setAttribute('required','required');
        toolURL.setAttribute('required','required');
    }

        if ((toolName.value === '') && (toolURL.value === '')) {
        toolName.removeAttribute('required');
        toolURL.removeAttribute('required');
    }
}

myForm.addEventListener('keyup', checkInputs, false);

<form id="myForm">
<label for="title">Title:</label> <input type="text" id="title" required> <br /><br />
<label for="toolName">Tool Name: </label><input type="text" id="toolName"> <br /> <br />
<label for="toolURL">Tool URL: </label><input type="url" id="toolURL"> <br /> <br />
<input type="submit" value="Submit" />
</form>

​