Jquery проверяет наличие текстового поля и проверяет

ProgramBox

Jquery проверяет наличие текстового поля и проверяет

Post author:admin
Запись опубликована:21 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery #dom

Вопрос:

У меня есть 1 текстовое поле для даты, 1 выпадающий список, 3 текстовых поля для входных значений. В зависимости от условия будут отображаться либо 2, либо 3 текстовых поля, но текстовое поле для даты и выпадающий список будут общими для обоих условий. Все они, включая текстовое поле даты и выпадающий список, являются обязательными полями. Если пользователь нажимает кнопку, мне нужно проверить, ввели ли они все обязательные поля или нет, тогда мне нужно проверить результаты. Если они пропустили ввод любого из обязательных полей, оно должно отображать пропущенное поле с красным цветом границы.

мой код:

 $("#btnCheck").click(function(){
//This "Validate" function will check and if any required field is missing will change the border-color of that element
Validate(Date, firstTextBox, secondTextBox, thirdTextBox, dropdownValue);
if (Date.length > 0 amp;amp; firstTextBox.length > 0 amp;amp; secondTextBox.length > 0 amp;amp; dropdownValue != "") {
    //It will call my ajax function
}
});

function Validate(Date, firstTextBox, secondTextBox, thirdTextBox, dropdownValue) {
    $("#txtDate, #txt1, #txt2, #ddlValue").css("border-color", "");
    if (Date.length == 0) { $("#txtDate").css("border-color", "red"); }
    if (firstTextBox.length == 0) { $("#txt1").css("border-color", "red"); }
    if (secondTextBox.length == 0) { $("#txt2").css("border-color", "red"); }
    if (dropdownValue == "") { $("#ddl").css("border-color", "red"); }
}

Мой запрос:

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

Любая помощь в этом будет очень полезна для меня. Заранее спасибо.

1. Как вы определяете, есть ли 4 или 5 полей для передачи в ajax?

2. При отображении страницы я проверяю условие, отображать ли 3-е текстовое поле или нет. Если оно отображается, оно должно передавать 5 значений, в противном случае 4 значения

3. Не могли бы вы просто проверить первые четыре, передать все пять переменных на сервер и позволить серверу решить, присутствует ли пятая или отсутствует, и сохранить только пятую переменную, если она присутствует?

4. В том случае, когда мне действительно нужно передать 5 значений, а пользователь ввел только 4 значения, вы хотите, чтобы я проверил на стороне сервера 5-е значение?

5. Я думаю, что это очень разумно.

Ответ №1:

Я объединил эту элементарную СКРИПКУ с простой проверкой.

Если входные данные недопустимы, функция останавливается и сообщает пользователю, где отсутствуют данные.

Если первые четыре переменные имеют действительные данные (validcheck = ‘гггг’), ВСЕ ПЯТЬ переменных будут переданы на сервер с помощью ajax, и сервер сохранит первые четыре (все действительные, поэтому сохраняемые), а пятая будет сохранена, если она существует, если нет, она будетне сохраняется.

Я не уверен, что эта концепция будет работать для вас.

 var datevalue, compass, textone, texttwo, textthree;
var validcheck;
$('#clickme').on('click', function(){
                 datevalue = $('#date').val();
                 compass = $('#firstoption').val();
                 textone = $('#firsttext').val();
                 texttwo = $('#secondtext').val();
                 textthree = $('#thirdtext').val();
                 validateme(datevalue, compass, textone, texttwo, textthree);
});

function validateme(one, two, three, four, five)
{
  if( one.length < 2 )
    {
     $('#date').css('border', '2px solid red');
     $('#date2').html('Required');
     validcheck = 'n';
     }
      else
    { validcheck = 'y'; }
  if( two.length < 1 )
  {
   $('#firstoption').css('border', '2px solid red');
   $('#firstoption2').html('Required');
   validcheck = validcheck   'n';
   }
    else { validcheck = validcheck    'y'; }
  if( three.length < 1 )
  {
   $('#firsttext').css('border', '2px solid red');
   $('#firsttext2').html('Required');
   validcheck = validcheck   'n';
   }
    else { validcheck = validcheck   'y'; }

  if( four.length < 1 )
  {
   $('#secondtext').css('border', '2px solid red');
   $('#secondtext2').html('Required');
   validcheck = validcheck   'n';
   }
    else { validcheck = validcheck    'y'; }

  if( validcheck == 'yyyy' )
    {
     //pass one, two, three, four, five to server with ajax
     alert('pass 5 variables to ajax');
     }
}