jQuery .Validate() submitHandler не работает

Question

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

Проблема заключается в том, что я не могу заставить submitHandler запускать функцию. Вот jsFiddle, над которым я работаю.

http://jsfiddle.net/JamesKrawczyk/xdo9nn48/

И код.

<script> 
function fireifworked() 
{ 
$('.testIfWorking').html('IT WORKED'); 
} 

$(document).ready(function() { 
    $("#form1").validate({ 
     rules: { 
      field1: "required" 
     }, 
     messages: { 
      field1: "Please specify your name" 

     }, 
     submitHandler: function(form) { 
      fireifworked(); 
     } 
    }) 



    $('#btn').click(function() { 
     $("#form1").valid(); 
    }); 
}); 
</script> 

<form id="form1" name="form1"> 
    Field 1: <input name="field1" type="text" /> 
</form> 

<div> 
    <input id="btn" type="button" value="Validate"/> 
</div> 

<div class="testIfWorking"> 
CHANGE THIS IS WORKING 
</div> 

Answer 1

Кнопка должна быть в форме и иметь тип submit Rathe чем button

<script> 
function fireifworked() 
{ 
$('.testIfWorking').html('IT WORKED'); 
} 

$(document).ready(function() { 
    $("#form1").validate({ 
     rules: { 
      field1: "required" 
     }, 
     messages: { 
      field1: "Please specify your name" 

     }, 
     submitHandler: function(form) { 
      fireifworked(); 
     } 
    }) 



    $('#btn').click(function() { 
     $("#form1").valid(); 
    }); 
}); 
</script> 

<form id="form1" name="form1"> 
    Field 1: <input name="field1" type="text" /> 
    <input id="btn" type="submit" value="Validate"/> 

</form> 




<div class="testIfWorking"> 
CHANGE THIS IS WORKING 
</div> 

Answer 2

The . в селекторе Jquery отсутствует, то он должен быть $('.testIfWorking').html('IT WORKED')

Answer 3

Похоже, JQuery не связаны между собой.

Добавьте это в заголовок перед началом код JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

Есть несколько способов, чтобы начать использовать JQuery на вашем веб-сайте. Вы можете:

-Скачать библиотека JQuery из jQuery.com

-Include JQuery из CDN, как Google, как описано выше. Например,