Конфликт на JavaScript форма проверки

Question

Я реализовал простую яваскрипта проверку, но проверку и представление формы никогда не бывают вместе ...

Когда я использую «onsubmit» (как показано ниже) она будет перейти на следующую страницу без проверки

, если я использую «щелчок» на конце формы

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

он будет проверять ввод .. но форма обыкновение быть представлены даже правильный вход

Это код, который я использовал // Javascript Validation

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 в вашем элементе формы и проверите проверку там, а не на событие click. Таким образом нажатие enter не будет обходить всю вашу проверку.

Answer 2

Пробуйте использовать Jquery validate. Я думаю, что это должно в значительной степени решить вашу проблему.

Answer 3

return false from chk_fromcity(), чтобы остановить отправку формы в действие.

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 
}