This is the just-validate library codes to validate my form, but it fails to submit the form after validation, it should submit after validating all the fields. I have tried to run these code but it does not run. These are the codes i’ve used. all field are verified. But it fails to submit the form
JavaScript
x
123
123
1
<!-- language: lang-js -->
2
<script>
3
const validation = new window.JustValidate('#appform', {
4
errorFieldCssClass: 'is-invalid',
5
errorLabelStyle: {
6
fontSize: '16px',
7
color: '#dc3545',
8
},
9
successFieldCssClass: 'is-valid',
10
successLabelStyle: {
11
fontSize: '16px',
12
color: '#20b418',
13
},
14
focusInvalidField: true,
15
lockForm: true,
16
});
17
18
validation
19
.addField('#fname', [
20
{
21
rule: 'required',
22
errorMessage: 'First name is required',
23
},{
24
rule: 'minLength',
25
value: 3,
26
},
27
])
28
.addField('#sname', [
29
{
30
rule: 'required',
31
errorMessage: 'Second name is required',
32
},{
33
rule: 'minLength',
34
value: 3,
35
},
36
37
])
38
.addField('#email', [
39
{
40
rule: 'required',
41
errorMessage: 'Email is required',
42
},
43
{
44
rule: 'email',
45
errorMessage: 'Enter a valid email',
46
}
47
48
])
49
.onSuccess((event) => {
50
document.getElementById("app-form").submit();
51
});
52
53
</script>
54
This in the CSS of my Code
55
<!-- language: lang-css -->
56
57
.form-group {
58
padding-right: 50px;
59
margin:20px;}
60
61
.form-control {
62
display: block;
63
width: 100%;
64
padding: 0.375rem 0.75rem;
65
font-size: 1rem;
66
line-height: 1.5;
67
color: #495057;
68
background-color: #fff;
69
background-clip: padding-box;
70
border: 1px solid #ced4da;
71
border-radius: 0.25rem;
72
}
73
.btn {
74
display: inline-block;
75
font-weight: 400;
76
text-align: center;
77
white-space: nowrap;
78
vertical-align: middle;
79
-webkit-user-select: none;
80
-moz-user-select: none;
81
-ms-user-select: none;
82
user-select: none;
83
border: 1px solid transparent;
84
padding: 0.375rem 0.75rem;
85
font-size: 1rem;
86
line-height: 1.5;
87
border-radius: 0.25rem;}
88
.btn-primary {
89
color: #212529;
90
background-color: #78d5ef;
91
border-color: #78d5ef; }
92
93
<!-- language: lang-html -->
94
<!DOCTYPE html>
95
<html lang="en">
96
<head>
97
<meta charset="UTF-8">
98
<title>Form Validation</title>
99
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
100
<head>
101
<body>
102
<form id="appform" name="appform" action="process_form.php" method="post" novalidate >
103
<div class="form-group">
104
<input type="text" name="fname" id="fname" placeholder="First Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false">
105
</div>
106
<div class="form-group">
107
<input type="text" name="sname" id="sname" placeholder="Second Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false">
108
</div>
109
<div class="form-group">
110
<input type="text" id="email" name="email" placeholder="jayrous@example.com" class="form-control">
111
</div>
112
<div class="form-group ">
113
<input type="submit" name="submit" id="submit" class="btn btn-primary " value= "Submit Form">
114
</div>
115
</body>
116
<!-- end snippet -->
117
118
119
120
121
122
123
Advertisement
Answer
The id of your form is “appform”:
JavaScript
1
2
1
<form id="appform"
2
but your JavaScript code is trying to get the element with an id of “app-form”, which is a totally different id:
JavaScript
1
2
1
document.getElementById("app-form").submit();
2
try changing them to match, e.g.
JavaScript
1
2
1
document.getElementById("appform").submit();
2