Sprawdzanie poprawności formularza jQuery na przycisku kliknij

Mam prostą stronę z formularzem i przyciskiem poza formularzem. Próbuję potwierdzić formularz na kliknięcie przycisku. Dodałem zasady sprawdzania poprawności formularza w funkcji document.onready. Jednak formularz nie jest sprawdzany.Sprawdzanie poprawności formularza jQuery na przycisku kliknij

HTML: -

<html> 
<head> 
    <script src="lib/jquery1.5.2.js"></script> 
    <script src="lib/jquery.validate.js"></script> 
    <script src="lib/myjs.js"></script> 
</head> 
<body> 

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

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

</body> 
</html>

JS: -

$(document).ready(function(){ 

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

    } 
}) 

$('#btn').click(function() { 
$("#form1").validate(); // This is not working and is not validating the form 
}); 

});

jakiś pomysł co jest nie tak?

Źródło

2012-12-02 ajithmanmu

Czy pojawił się błąd JavaScript? –

Nie ma błędu JS. – ajithmanmu

Jaką wtyczkę używasz do sprawdzania poprawności? – WebweaverD

W ramach obsługi click, błędem jest metoda .validate(); to tylko inicjuje wtyczkę, nie sprawdza poprawności form.

Aby wyeliminować potrzebę posiadania submit przycisk wewnątrz form użyć .valid() do uruchomienia procesu sprawdzania oryginalności ...

$('#btn').on('click', function() { 
    $("#form1").valid(); 
});

jsFiddle Demo

.validate() - zainicjować wtyczki (z opcjami) raz w DOM gotowy.

.valid() - aby sprawdzić stan sprawdzania poprawności (wartość logiczna) lub uruchomić test sprawdzania poprawności na form w dowolnym momencie.

W przeciwnym razie, jeśli miał przycisk type="submit" wewnątrz pojemnika form, byś nie potrzebował specjalnej click obsługi oraz metodę .valid(), jako plugin by uchwycić to automatycznie.

Demo without click handler

EDIT:

Trzeba również dwie kwestie w swoim HTML ...

<input id="field1" type="text" class="required">

Nie trzeba class="required" zasady podczas deklarowania w obrębie .validate(). Jest zbędny i niepotrzebny.
Brak atrybutu name. Reguły są deklarowane w zakresie .validate() przez ich name. Wtyczka zależy od unikalnych atrybutów name, aby śledzić dane wejściowe.

powinny być ...

<input name="field1" id="field1" type="text" />

Źródło

2012-12-02 17:34:37 Sparky

Dziękujemy! .. zadziałało. – ajithmanmu

Nie ma za co. – Sparky

Edytowałem twoją odpowiedź, aby działała dla innego rodzaju struktury formularza. http://stackoverflow.com/a/28723145/2615737 –

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

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

Jesteś również type = "przycisk" używasz. I nie jestem pewien, dlaczego powinieneś oddzielić przycisk przesyłania, umieścić go w formularzu. Bardziej właściwe jest robienie tego w ten sposób. To powinno działać.

Źródło

2012-12-02 17:45:11 Wap

Prawda. Ale czy mógłbym przynajmniej odzyskać swój głos? Haha Tylko drobny błąd i niedopatrzenie z mojej strony. ; p ... Nigdy nie powiedziałem, że to źle, po prostu powiedziałem, że jest to czystsze w ten sposób. Ogólnie mówiąc. – Wap

Dlaczego zawsze znajduję wadę? Po prostu starałem się pomóc, dając działającą alternatywę tak szybko, jak tylko mogę, aby mógł z niej skorzystać, jeśli okaże się, że tego właśnie szuka. To nie tak, że jestem trollingiem. Wymiana komentarzy to długi proces, wiesz. Lepiej spójrz na jasną stronę, stary. – Wap

SO to jakość odpowiedzi na konkretne pytania ... nic więcej, nic mniej. – Sparky

Sprawdzanie poprawności formularza jQuery na przycisku kliknij

Odpowiedz

Powiązane problemy