2013-03-28 69 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