需要更正此表单验证

Question

我有这个小表单，默认情况下需要第一个字段（标题）。仅在特定条件下才需要第 2 和第 3。

案例一：如果填写工具名称，则工具名称和工具 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

您可以大大简化您的代码，请参阅 cmets 以获得说明。

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>