2015-08-19 3 views
1

Я два поля ввода один является file другой textareaодин из двух полей ввода требуется

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

Пользователь должен либо загрузить файл или введите текст. Если пользователь оставляет пустые оба входа, он должен сказать: «выбрать файл или введите информацию« если он заполняет оба, это нормально.

Мой JQuery:

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

У меня есть this code. Как мы можем реализовать что-то вроде if else для того, чтобы потребовалось одно из полей?

+0

попробовать вручную код с сообщением оповещения –

ответ

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

Исходя из вашего вопроса, есть только два возможных условия:

  • если либо одно поле или оба поля заполнены, пользователь проходит валидация
  • , если никакие поля не заполнены, пользователь не проходит проверку

Это легко сделать, проверив значение любого входа. Пока один не пуст, пользователь проходит тест. Это если/другое условие может быть записано как:

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/

+0

Это не очень масштабируемым - если ОП хочет добавить еще один вход в форму, то JS также необходимо будет изменить. –

+0

@DavidJones Ну, OP только спросил о проверке двух полей, и я полагаю, что он не ищет масштабируемости. Если вы хотите поговорить о масштабируемости, вам придется реорганизовать свой код, чтобы рассмотреть пары '.input_field' вместо того, чтобы просто повторять все их сразу. Короче говоря, не зная, какой контекст OP намеревается использовать код, мы не будем знать, будет ли масштабируемость когда-либо проблемой. – Terry

1

Проверьте внутри вашей формы Если по крайней мере один делается разорвать петлю и идти подавать еще возвращение ложным

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

1

Вы можете написать коды 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> 
Смежные вопросы