Проверка формы jQuery не работает

Question

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

Мой HTML:

<form id="configuration" action=""> 

    <div class="con_near"> 
     <label for="height">height: (mm)</label> 
     <input id="form_height" name="height" maxlength="4" type="text" /> 
    </div><!--End con_near--> 

    <input name="calculated" type="submit" class="submit" value="Calculate" /> 

</form> 

Мой JQuery:

<script> 

    $(document).ready(function(){ 

    // Form validation 
    var configForm = $("#configuration"); 
    var height = $("#form_height"); 

    // On blur 
    height.blur(validateHeight); 

    // On keyup 
    height.keyup(validateHeight); 

    configForm.submit(function(){ 
     if(validateHeight()) 
      return true; 

     else 
      return false; 

    });   

    function validateHeight() { 
     if(height.val().length() < 4) { 
      height.addClass("red_border"); 
      return false; 
     } 
     else{ 
      height.removeClass("red_border"); 
      return true;  
     } 
    } 

    }); 

     </script> 

Answer 1

длина не является функцией это свойство

попробовать

configForm.submit(function(){ 
    if(validateHeight(height)) 
     return true; 

    else 
     return false; 

});  
function validateHeight(height) { 
    if(height.val().length < 4) { 
     height.addClass("red_border"); 
     return false; 
    } 
    else{ 
     height.removeClass("red_border"); 
     return true;  
    } 
} 

Answer 2

Проблема здесь .length()

Использование

if(height.val().length < 4) { 

вместо

if(height.val().length() < 4) { 

Answer 3

Использование length вместо length() как,

if(height.val().length < 4) {

вместо

if(height.val().length() < 4) {

function validateHeight(height) { 
    if(height.val().length < 4) { 
    ..... 

Demo

Answer 4

представить событие не остановится, возвращая ложное вам нужно использовать preventDefault(), чтобы остановить событие попробовать этот код

configForm.submit(function(e){ 
    if(!validateHeight()) 
     e.preventDefault(); 
});   

function validateHeight() { 
    if(height.val().length < 4) { // <- here you also made a mistake in length its a property not a function 
     height.addClass("red_border"); 
     return false; 
    } 
    height.removeClass("red_border"); 
    return true; 
} 

Answer 5

попробовать что-то вроде этого

$(document).ready(function(){ 

    // Form validation 
    var configForm = $("#configuration"); 
    var height = $("#form_height"); 

    // On blur 
    height.blur(validateHeight); 

    // On keyup 
    height.keyup(validateHeight); 

    configForm.submit(function(){ 
     return validateHeight(); 
    }); 

    function validateHeight() { 
     if(height.val().length < 4) { 
      height.addClass("red_border"); 
      return false; 
     } 
     else{ 
      height.removeClass("red_border"); 
      return true; 
     } 
    } 

});