衝突JavaScript的表單驗證

Question

我實現了一個簡單的JavaScript驗證，但驗證和表單提交從來沒有一起發生......

當我使用「的onsubmit」（如下圖所示），它會轉到經過驗證，下頁

如果我使用「點擊」的形式

<input type="button" name="submit" id="send" value="Search Flights" onclick="return validate_booking_form();" /> 
</form> 

它會驗證輸入的結束..但形式不會被提交，即使正確輸入

這是我用過 // JavaScript驗證

function validate_booking_form() 
{ 
    chk_fromcity(); 
    chk_tocity(); 
    chk_depature_date();     

} 

function chk_fromcity() 
{ 
    var from_city = $('#from_cities').val(); 
    if (from_city == '') 
    { 
     $("#from_cities").removeClass('fieldInput'); 
     $("#from_cities").addClass('error'); 
     $("#errormsg_from").fadeTo(200, 1, function() 
     { 
      $(this).html('Please Enter a City').addClass('errormsg');     
     }) 
    } 
    else 
    { 
     $('#from_cities').removeClass('error'); 
     $('#from_cities').addClass('fieldInput'); 
     $("#errormsg_from").fadeTo(200, 1, function() 
     { 
      $(this).html('').removeClass('errormsg');     
     })    
    } 
} 

代碼和形式

<form method="POST" action="../controller/booking.php" name="search_flights_names" onsubmit="return validate_booking_form();" > 

    /// Form content 
<div class="form_input_container"> 
         <div class="form_input"> 
    <input type="text" id="from_cities" name="from_city" class="fieldInput" onblur="return chk_fromcity()" /> 
         </div> 
</div> 

<input type="submit" name="submit" id="send" value="Search Flights" /> 
</form> 

Answer 1

提交是正確的按鈕來使用。

在您的表單元素中嘗試putton onsubmit，並驗證是否發生在那裏而不是點擊事件。按這樣的輸入不會繞過所有的驗證。

Answer 2

嘗試使用Jquery validate。我認爲它應該可以解決您的問題

Answer 3

從chk_fromcity（）返回false以停止表單發佈到操作。

function chk_fromcity() 
{ 
    var from_city = $('#from_cities').val(); 
    if (from_city == '') 
    { 
     $("#from_cities").removeClass('fieldInput'); 
     $("#from_cities").addClass('error'); 
     $("#errormsg_from").fadeTo(200, 1, function() 
     { 
      $(this).html('Please Enter a City').addClass('errormsg');     
     }); 

     return false; 
    } 

    $('#from_cities').removeClass('error'); 
    $('#from_cities').addClass('fieldInput'); 
    $("#errormsg_from").fadeTo(200, 1, function() 
    { 
     $(this).html('').removeClass('errormsg');     
    })    

    // return true; // default is true which is why you were passing the validation 
}