[jQuery] Form Validation
Daarom wil ik de submit nu altijd actief laten maar zodra de gebruiker daarop drukt gaat hij kijken welke velden niet zijn ingevuld met de class/id 'required' o.i.d.
Iemand suggesties? ;)
EDIT: Inmiddels beland op deze pagina. Even doorspitten ;-)
Gewijzigd op 29/09/2011 16:11:23 door PHP Scripter
en gebruik een rel atribute ipv class of id
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('form').submit(function()
{
/** Testing **/
alert('Stap 1');
$('.required').each(function(n, element)
{
/** Testing **/
alert('Stap 3');
if ($(element).val() == '')
{
/** Testing **/
alert('Stap 3');
$('.required').addClass('.required-yellow');
return false;
}
});
});
{
/** Testing **/
alert('Stap 1');
$('.required').each(function(n, element)
{
/** Testing **/
alert('Stap 3');
if ($(element).val() == '')
{
/** Testing **/
alert('Stap 3');
$('.required').addClass('.required-yellow');
return false;
}
});
});
Hij gaat continu voorbij de return false (Stap 3) terwijl als ik wat invul in de input hij niet de alert van Stap 3 laat zien.
Gewijzigd op 29/09/2011 17:09:40 door PHP Scripter
Wanneer ik dus met firebug de class 'required' van een element afhaal, is het element gewoon gevalideerd? Of controleer je ook nog met PHP of alles juist is ingevoerd?
Ik weet niet hoe jij precies programmeert? Als je middels het MVC pattern werkt, zou je een AJAX request naar een controller / action kunnen doen, die gewoon opnieuw de view renderd. Dan heb je alleen JQuery nodig voor het AJAX request
Wil je het alleen in JQuery doen, dan zou ik de velden in een array stoppen en die middels $.each doorlopen en dan een validatie functie / methode aanroepen die de velden doorloopt. Wanneer je dan een array met foutmeldingen bijhoudt, kan je die ook weer doorlopen en aan de juiste velden de juiste meldingen tonen.
Snap je het een beetje?
Succes!
Controller:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
class Naamvandecontroller extends CI_Controller
{
public function indexAction()
{
$this->_helper->layout()->setLayout('ajax'); // Plaats in ajax.phtml / ajax.tpl alleen de code waarmee je een view renderd. (normaal staat die in de content div)
// Controleer of het een AJAX request is
if ($this->getRequest()->isXmlHttpRequest()) {
$isValid = false;
// model instantieren
$model = new Model();
$model->setFromArray($this->getRequest()->getPost());
if ($model->isValid()) {
// valid
$isValid = true;
// Opslaan
$model->save();
}
$this->view->isValid = $isValid;
$this->view->errors = $model->getErrors();
}
}
}
?>
class Naamvandecontroller extends CI_Controller
{
public function indexAction()
{
$this->_helper->layout()->setLayout('ajax'); // Plaats in ajax.phtml / ajax.tpl alleen de code waarmee je een view renderd. (normaal staat die in de content div)
// Controleer of het een AJAX request is
if ($this->getRequest()->isXmlHttpRequest()) {
$isValid = false;
// model instantieren
$model = new Model();
$model->setFromArray($this->getRequest()->getPost());
if ($model->isValid()) {
// valid
$isValid = true;
// Opslaan
$model->save();
}
$this->view->isValid = $isValid;
$this->view->errors = $model->getErrors();
}
}
}
?>
View:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div>
<!-- Hier je formulier -->
</div>
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$.ajax({
url: $(this).attr('action'), // Pakt de action van het formulier op
data: $(this).serialize(), // Serialiseert de form waarden
dataType: 'HTML',
type: 'POST',
success: function(data) {
$('.contentdivwaarinhetformulierstaat').replaceWith(data);
}
});
return false;
});
});
</script>
<!-- Hier je formulier -->
</div>
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$.ajax({
url: $(this).attr('action'), // Pakt de action van het formulier op
data: $(this).serialize(), // Serialiseert de form waarden
dataType: 'HTML',
type: 'POST',
success: function(data) {
$('.contentdivwaarinhetformulierstaat').replaceWith(data);
}
});
return false;
});
});
</script>
Mogelijkheid twee, is met alleen JQuery. Je krijgt dan zoiets.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div>
<!-- Hier je formulier -->
</div>
<script type="text/javascript">
$(function() {
$('form').submit(function() {
var errors = [];
var fields = ['veld1', 'veld2', 'veld3', 'veld4'];
// Doorlopen
$.each(fields, function(index, fieldName)) {
var formField = $("input[name='" + fieldName + "']");
// Eerst alle foutmeldingen verwijderen.
var formField.removeClass('is_error');
// Eerst validatie, (mag niet leeg zijn) (Mag ook via een functie, function notEmpty() {})
if (formField.val() == '') {
errors.push(fieldName);
}
// Afzonderlijk validatie, bijvoorbeeld alleen cijfers, en 11 lang
if (fieldName == '...' && $.inArray(fieldName, errors) == -1) {
var regex = /[0-9]{11}/;
if (!regex.test(fieldName.val()) {
errors.push(fieldName);
}
}
// etc
// Doorlopen errors
if (errors.length > 0) {
$.each(errors, function(index, errorFieldName) {
$("input[name='" + errorFieldName + "']").addClass('is_error');
});
}
else {
// Geen errors,
// een ajax / json request voor het verwerken van de data
}
});
});
});
</script>
<!-- Hier je formulier -->
</div>
<script type="text/javascript">
$(function() {
$('form').submit(function() {
var errors = [];
var fields = ['veld1', 'veld2', 'veld3', 'veld4'];
// Doorlopen
$.each(fields, function(index, fieldName)) {
var formField = $("input[name='" + fieldName + "']");
// Eerst alle foutmeldingen verwijderen.
var formField.removeClass('is_error');
// Eerst validatie, (mag niet leeg zijn) (Mag ook via een functie, function notEmpty() {})
if (formField.val() == '') {
errors.push(fieldName);
}
// Afzonderlijk validatie, bijvoorbeeld alleen cijfers, en 11 lang
if (fieldName == '...' && $.inArray(fieldName, errors) == -1) {
var regex = /[0-9]{11}/;
if (!regex.test(fieldName.val()) {
errors.push(fieldName);
}
}
// etc
// Doorlopen errors
if (errors.length > 0) {
$.each(errors, function(index, errorFieldName) {
$("input[name='" + errorFieldName + "']").addClass('is_error');
});
}
else {
// Geen errors,
// een ajax / json request voor het verwerken van de data
}
});
});
});
</script>
Alles is zo maar uit de losse pols dus er zullen wel wat fouten in zitten, maar ik hoop dat je een beetje snapt wat ik bedoel.
Succes!