This repository was archived by the owner on Aug 28, 2019. It is now read-only.
Errors are being removed if input fields are added dynamically to DOM. #11
Description
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();