Question

我是这种小型表格，默认情况下需要第一个字段（标题）。仅在特定条件下才需要第二和第三。

案例I：如果填写了工具名称，则工具名称和工具名称均为工具URL成为必需。案例II：如果填写了工具URL，则工具名称和工具名称均为工具网址变得必需。

我不确定它是否按预期工作。你能帮我纠正一下我的代码吗？

＆＃13;

$(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;
			});
			
		});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可以稍微简化一下代码，请参阅说明的注释。

＆＃13;

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
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是一种使用无库javascript（而不是jQuery）的直接方法。

（虽然，你会发现它与jQuery非常相似）。

每当在表单中输入数据或从表单中删除数据时，都会检查表单输入，并根据需要添加或删除required属性。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

需要更正此表单验证

2 个答案: