2013-03-28 75 views
1

好吧,所以我一直在四处寻找条件语句在JQuery中,但我无法找到一个解决方案如何检查,以确保至少有一个两个输入框有内容。联系表单,填写两个输入字段之一检查

这是我迄今为止

$('#send').click(function(){ // when the button is clicked the code executes 
$('.error').fadeOut('fast'); // reset the error messages (hides them) 

var error = false; // we will set this true if the form isn't valid 

var name = $('input#namn').val(); // get the value of the input field 
var message = $('textarea#meddelande').val(); // get the value of the textarea 
var phone = $('input#telefon').val(); // get the value of the input field 
var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input 
var email = $('input#epost').val(); // get the value of the input field 

if(name == "" || name == " " || name == "namn" || name.length < 2) { 
    $('input#namn').val("namn").css({ 'color': 'red' }); 
    error = true; // change the error state to true 
} 

if(phone == "" || phone == " " || phone == "telefon" || phone.length < 5) { 
    $('input#telefon').val("telefon").css({ 'color': 'red' }); 
    error = true; // change the error state to true 
} 

if (email == "" || email == " " || email == "epost") { // check if the field is empty 
    $('input#epost').val("epost").css({ 'color': 'red' }); 
    error = true; 

}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable 
    $('input#epost').val("kontrollera epost").css({ 'color': 'red' }); 
    error = true; 
} 

if(message == "" || message == " " || message == "meddelande" || message.length < 10) { 
    $('textarea#meddelande').val("meddelande").css({ 'color': 'red' }); 
    error = true; // change the error state to true 
} 

if(error == true) { 
    $('#err-form').fadeIn('fast'); 
    return false; 
} 

var data_string = $('#ajax-contactform').serialize(); // Collect data from form 

$.ajax({ 
    type: "POST", 
    url: $('#ajax-contactform').attr('action'), 
    data: data_string, 
    timeout: 6000, 
    error: function(request,error) { 
     if (error == "timeout") { 
      $('#err-timedout').fadeIn('fast'); 
     } 
     else { 
      $('#err-state').fadeIn('fast'); 
      $("#err-state").html('Ett fel uppstod: ' + error + ''); 
     } 
    }, 
    success: function() { 
     $('#ajax-contactform').fadeOut('fast'); 
     $('#success-msg').fadeIn('slow'); 
    } 
}); 

return false; // stops user browser being directed to the php file 

}); //结束点击功能

而且其工作的罚款。但是,我想提出一个条件声明来检查并确保电子邮件或电话有内容。我不想迫使人们不得不离开这两个,但至少有一个。

因此,如果手机有内容(只有数字,没有单词“电话”),则电子邮件不再是强制性的,反之亦然。如果电子邮件有内容,则仍需检查以确保其有效的电子邮件。

我该怎么做呢?我在一个有点丢在这里:(

回答

0

因此,这是我最终使用的是什么。

$(function() { 
     var input = $('input[type=text], textarea'); 

     input.focus(function() { 

      var ibf = $(this); 

      if(ibf.val() == ibf.attr('title')) 
       ibf.val(''); 

      if(ibf.css({ 'color': 'red' })) 
       ibf.css({ 'color': '' }); 

     }).blur(function() { 
      var ibb = $(this); 

      if(ibb.val() == '') 
       ibb.val(ibb.attr('title')); 
     }); 

    }); 

    $("#telefon").keydown(function(e){ 
     var key = e.charCode || e.keyCode || 0; 
     // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY 
     return ( 
      key == 8 || 
      key == 9 || 
      key == 46 || 
      (key >= 37 && key <= 40) || 
      (key >= 48 && key <= 57) || 
      (key >= 96 && key <= 105)); 
    }); 

    $('#send').click(function(){ // when the button is clicked the code executes 
     $('.error').fadeOut('fast'); // reset the error messages (hides them) 

     var error = false; // we will set this true if the form isn't valid 

     var name = $('input#namn').val(); // get the value of the input field 
     var message = $('textarea#meddelande').val(); // get the value of the input field 
     var phone = $('input#telefon').val(); // get the value of the input field 
     var email_compare = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); // Syntax to compare against input 
     var email = $('input#epost').val(); // get the value of the input field 

     if(name == "" || name == " " || name == "namn" || name.length < 2) { 
      $('input#namn').val("namn").css({ 'color': 'red' }); 
      error = true; // change the error state to true 
     } 

     var phone_valid = phone.length >= 6; 
     var email_valid = email_compare.test(email); 

     if(phone_valid && phone != 'telefon' || email_valid){ //one of two are populated 
      //make donut 

     }else{ 
      /*$('input#telefon').val("telefon").css({ 'color': 'red' }); 
      $('input#epost').val("epost").css({ 'color': 'red' }); 
      $('#err-form-contact').fadeIn('fast');*/     
      error = true; 

      if (!phone_valid && phone != 'telefon' && phone != ''){ 
       $('input#telefon').val("telefon").css({ 'color': 'red' }); 
      } 

      if (!email_valid && email != 'epost' && email != ''){ 
       $('input#epost').val("epost").css({ 'color': 'red' }); 
      } 
     } 

     if(message == "" || message == " " || message == "meddelande" || message.length < 10) { 
      $('textarea#meddelande').val("meddelande").css({ 'color': 'red' }); 
      error = true; // change the error state to true 
     } 

     if(error == true) { 
      $('#err-form').fadeIn('fast'); 
      return false; 
     } 

     var data_string = $('#ajax-contactform').serialize(); // Collect data from form 

     $.ajax({ 
      type: "POST", 
      url: $('#ajax-contactform').attr('action'), 
      data: data_string, 
      timeout: 6000, 
      error: function(request,error) { 
       if (error == "timeout") { 
        $('#err-timedout').fadeIn('fast'); 
       } 
       else { 
        $('#err-state').fadeIn('fast'); 
        $("#err-state").html('Ett fel uppstod: ' + error + ''); 
       } 
      }, 
      success: function() { 
       $('#ajax-contactform').fadeOut('fast'); 
       $('#success-msg').fadeIn('slow'); 
      } 
     }); 

     return false; // stops user browser being directed to the php file 
    }); // end click function 

现在它只检查两个盒子之一(电子邮件/电话)是否有内容。

1
if (! ((phone.length && phone != 'telefon') || email.length)) { 
    //none of the above has input 
} 
+0

我试着添加这个,但它不起作用。当发送它仍然要求两个。 – axelra82 2013-03-28 10:19:09

0

你可以电话和电子邮件if条件之间添加else if ..所以,如果phone存在没有被选中,否则如果email存在..phoneemai升未选中

if(phone == "" || phone == " " || phone == "telefon" || phone.length < 5) { 
    $('input#telefon').val("telefon").css({ 'color': 'red' }); 
    error = true; // change the error state to true 
} else if (email == "" || email == " " || email == "epost") { // check if the field is empty 
//^^^ HERE 
    $('input#epost').val("epost").css({ 'color': 'red' }); 
    error = true; 

}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable 
    $('input#epost').val("kontrollera epost").css({ 'color': 'red' }); 
    error = true; 
} 

但是我recommened你看看到jquery validation plugins ...易于使用和定制...而不是写整个代码

+0

同样的事情,这个,但它仍然要求两个。我试着只是在填写手机,但它仍然需要电子邮件:(是的,我已经看到了在论坛上的验证插件。我想我可能不得不看看它接近。它可以帮助这样的事情? – axelra82 2013-03-28 10:20:45

+0

是它将.... – bipen 2013-03-28 10:21:52

+0

我看了到jQuery验证插件现在一点点,但我不是很熟练的JS,人民解放阵线看起来不错,如果你知道JS,知道自己在做什么。我另一方面已经能够剪切和粘贴上面的contactform验证,所以我真的更喜欢它,如果我可以做一些检查,以确保至少有两个盒子(电话和电子邮件)中的一个被填充。没有比JVP更简单的方法吗?其他的如果看起来像是一个很好的解决方案,但它不起作用。当手机进入时它仍然需要电子邮件,反之亦然。 – axelra82 2013-03-29 15:40:26