Question

我有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 && firstTextBox.length > 0 && secondTextBox.length > 0 && 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函数。

这方面的任何帮助对我都有帮助。提前谢谢。

Answer 1

我已经将这个基本的FIDDLE与简单的验证结合起来。

如果输入无效，则该功能停止并告诉用户数据丢失的位置。

如果前四个变量有有效数据（validcheck =＆＃39; yyyy＆＃39;），所有五个变量将通过ajax传递给服务器，服务器将存储前四个（全部有效，因此可存储的，如果存在则存储第五个，如果不存在，则不存储。

我不确定这个概念是否适合你。

JS

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

Jquery检查文本框是否存在并进行验证

1 个答案: