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
validation19
.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 Code55
<!-- 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