js-form-validator
js-form-validator copied to clipboard
Published
20 hours ago •
via-profit
via-profit
Errors are being removed if input fields are added dynamically to DOM.
Adding any input field or select field dynamically to DOM removes all errors being shown on the form.
This is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/validator.css">
</head>
<body>
<div class="row mt-5 mx-0">
<div class="col-md-4 mx-auto">
<form class="card card-body" id="form">
<div class="form-group">
<label for="">Checkbox</label>
<input type="checkbox" name="checkbox" id="check">
</div>
<div class="js-container">
</div>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" data-rule="required">
</div>
<div class="form-group">
<labels>Email</label>
<input type="text" name="email" class="form-control" data-rule="required">
</div>
<button class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script src="/form-validator/js-form-validator.min.js"></script>
<script src="/form.js"></script>
<script src="/main.js"></script>
</body>
</html>
and this is my js
const Form = (function() {
return {
init() {
this.bindEvents();
this.validator = new Validator(document.querySelector('#form'), (err, res) => {
return false;
}, {
autoTracking: true,
removeSpaces: true
});
},
bindEvents() {
form.addEventListener('submit', (event) => {
event.preventDefault();
// this.validator.validate();
});
document.getElementById('check').addEventListener('change', function() {
const container = document.getElementsByClassName('js-container')[0];
if(this.checked) {
console.log('here')
container.innerHTML = '<input value="Hello" class="form-control">'
} else {
container.innerHTML = ''
}
})
}
}
})();
Form.init();
