Question

我有两个输入字段，一个是file，另一个是textarea

<input class="input_field" type="file" name="title" />
<textarea class="input_field" name="info"></textarea>

用户必须上传文件或输入文字。如果用户将两个输入留空，则应该说＆＃34; 选择文件或输入信息＆＃34;如果他/她填两个，那就没关系。

我的JQuery：

$(function(){
       $(".input_field").prop('required',true);
});

我有this code。我们如何实现类似if else条件的东西，使其需要其中一个字段？

Answer 1

请参阅此小提琴https://jsfiddle.net/LEZ4r/652/

在提交表单时，我使用input_field类将所有元素修改为每个元素。

$(function(){
        $('form').submit(function (e) {
            var failed = false;
           $(".input_field").each(function() {
               if (!$(this).val()) {
                    failed = true;   
               }
           });

            console.log(failed);
            if (failed === true) {  
                e.preventDefault();
            }
        });
});

Answer 2

根据您的问题，只有两种可能的条件：

如果填写了一个字段或两个字段，则用户通过验证
如果没有填写任何字段，则用户验证失败

这可以通过检查任一输入的值来轻松完成。只要一个不为空，用户就通过测试。这个if / else条件可以写成：

if($('input[type="file"].input_field').val() || $('textarea.input_field').val()) {
    // Passed validation 
} else {
    // Failed validation
}

检查错误的简单模式是创建错误标志，当一个或多个验证检查失败时，将会引发该错误标志。在手动表单提交之前，您在脚本末尾评估此错误标志：

$(function(){
    $('form').on('submit', function(e) {
        e.preventDefault();

        // Perform validation
        var error = false;

        if($('input[type="file"].input_field').val() || $('textarea.input_field').val()) {
            alert('Passed validation');
            error = false;
        } else {
            alert('Please fill up one field');
            error = true;
        }

        // Check error flag before submission
        if(!error) $(this)[0].submit();
    });
});

请在此处查看工作小提琴：http://jsfiddle.net/teddyrised/LEZ4r/653/

Answer 3

检查表单内部如果完成了至少一个，请中断循环并转到提交，否则返回false

$(function(){
  $('form').on('submit',function(e){
    var doneOnce = false;
    $(this).children().each(function(){
      if($(this).val()){
        doneOnce = true;
        return false;//return false will break the .each loop
      }
    });
    alert(doneOnce)
    if(!doneOnce){
      e.preventDefault();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class="input_field" type="file" name="title" />
  <textarea class="input_field" name="info"></textarea>
  <input type=submit />
</form>

Answer 4

您可以在Javascript中编写代码来验证表单。您必须创建onclick或onsubmit函数，该函数将检查是否有任何输入字段为空。您可以编写类似以下代码的内容：

<script>
  function validateForm() {
    var fstname=document.getElementById("fname").value;
    var lstname=document.getElementById("lname").value;

    if(fstname===null || fstname===""){
        alert("Plese choose a file.");
        return false;
    }
    else if(lstname===null || lstname===""){
      alert("Plese type file info.");
      return false;  
    }
    else{ 
        return confirm("Your file: "+fstname+" and it of type "+lstname);

    }
}

<body>
   <form action="text.php" name="myForm" onsubmit="return validateForm()">
    First Name: <input type="file" id="fname" name="FirstName">
    Last Name: <input type=text" id="lname" name="LastName"><br/>
    <input type="submit" value="Submit">
   <form> 

</body>

需要两个输入字段之一

4 个答案: