|
|
@@ -0,0 +1,200 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>Form</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+ <div id="formContainer">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ function Form(el, data, okCallback, cancelCallback){
|
|
|
+
|
|
|
+ let check=[];
|
|
|
+ let formBody = document.createElement('div')
|
|
|
+ let okButton = document.createElement('button')
|
|
|
+ okButton.innerHTML = 'OK'
|
|
|
+ okButton.disabled=true;
|
|
|
+
|
|
|
+ let cancelButton = document.createElement('button')
|
|
|
+ cancelButton.innerHTML = 'Cancel';
|
|
|
+
|
|
|
+ formBody.innerHTML = '<h1>тут будет форма после перервы</h1>';
|
|
|
+ const table=document.createElement('table');
|
|
|
+
|
|
|
+ this.okCallback = okCallback
|
|
|
+ this.cancelCallback = cancelCallback
|
|
|
+
|
|
|
+ let backupData = {...data};
|
|
|
+ this.data = data
|
|
|
+ this.validators = {}
|
|
|
+
|
|
|
+ this.createData = function (object) {
|
|
|
+ formBody.append(table)
|
|
|
+ formBody.appendChild(cancelButton);
|
|
|
+ formBody.appendChild(okButton);
|
|
|
+
|
|
|
+ let inputCreators = {
|
|
|
+ String(key, value, oninput){
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.type = 'text'
|
|
|
+ input.placeholder = key
|
|
|
+ if (/^[*]+$/.test(value)) {
|
|
|
+ input.type = 'password';
|
|
|
+ input.value = '';
|
|
|
+ } else {
|
|
|
+ input.type = 'text'
|
|
|
+ input.value = value
|
|
|
+ }
|
|
|
+ input.oninput = () => oninput(input.value)
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+ Boolean(key, value, oninput){
|
|
|
+ //label for с input type='checkbox' внутри
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.type = 'checkbox'
|
|
|
+ input.checked=value
|
|
|
+ input.placeholder = key
|
|
|
+ input.oninput = () => oninput(input.checked)
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+ Date(key, value, oninput){
|
|
|
+ //используйте datetime-local
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.type = 'datetime-local'
|
|
|
+ input.placeholder = key
|
|
|
+ let offset = value.getTimezoneOffset()
|
|
|
+ const now = value.getTime()
|
|
|
+ const nowPlusOffset = new Date(now - offset * 60 * 1000)
|
|
|
+ input.value = nowPlusOffset.toISOString().slice(0, -1)
|
|
|
+ input.oninput = () => oninput(input.value)
|
|
|
+ return input
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ for(let item in data){
|
|
|
+
|
|
|
+ let tr=document.createElement('tr');
|
|
|
+ let th=document.createElement('th');
|
|
|
+ let p=document.createElement('p');
|
|
|
+ let errorField = document.createElement('td')
|
|
|
+ let errorFieldMessage = document.createElement('p')
|
|
|
+ p.innerText=item+":";
|
|
|
+ th.append(p);
|
|
|
+ tr.append(th);
|
|
|
+ let td=document.createElement('td');
|
|
|
+ let input=inputCreators[data[item].constructor.name](item,data[item],
|
|
|
+ value=>{
|
|
|
+ data[item]=value;
|
|
|
+ }
|
|
|
+ )
|
|
|
+ td.append(input);
|
|
|
+ tr.append(td);
|
|
|
+ table.append(tr);
|
|
|
+ errorField.append(errorFieldMessage)
|
|
|
+ formBody.append(table);
|
|
|
+
|
|
|
+ input.onchange = () => {
|
|
|
+ if(data[item] === '') {
|
|
|
+ input.style.background = '#FFDEAD';
|
|
|
+ check.push[false]
|
|
|
+ } else {
|
|
|
+ input.style.background = '#fff';
|
|
|
+ check.push[true]
|
|
|
+ }
|
|
|
+ if (this.validators[item]) {
|
|
|
+ let validationResult = this.validators[item](data[item], item, data, input)
|
|
|
+ if (validationResult === true) {
|
|
|
+ errorFieldMessage.innerText = ''
|
|
|
+ input.style.background = '#fff';
|
|
|
+ check.push[true]
|
|
|
+ }
|
|
|
+ else if (typeof validationResult === 'string') {
|
|
|
+ errorFieldMessage.innerText = validationResult
|
|
|
+ input.style.background = '#f00';
|
|
|
+ check.push[false]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item[0] === "*") {
|
|
|
+ input.required = true;
|
|
|
+ th.innerHTML = `<strong>${key.slice(1)} <sup style="color: red">*</sup></strong>`;
|
|
|
+ } else {
|
|
|
+ th.innerText = item;
|
|
|
+ }
|
|
|
+ if (data[item] === '') {
|
|
|
+ input.style.background = '#FFDEAD';
|
|
|
+ check.push[false]
|
|
|
+ } else {
|
|
|
+ input.style.background = '#fff';
|
|
|
+ check.push[true]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+ this.createData(this.data);
|
|
|
+
|
|
|
+ if(typeof okCallback === 'function'){
|
|
|
+ /*formBody.appendChild(okButton);
|
|
|
+ okButton.onclick = (e) => {
|
|
|
+ console.log(this);
|
|
|
+ this.okCallback(e);
|
|
|
+ }*/
|
|
|
+ if (check.includes(false)){
|
|
|
+ okButton.disabled = true;
|
|
|
+ }else{
|
|
|
+ okButton.disabled = false;
|
|
|
+ okButton.onclick = (e) => {
|
|
|
+ okCallback(this.data);
|
|
|
+ console.log(this);
|
|
|
+ this.okCallback(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (typeof cancelCallback === 'function'){
|
|
|
+ /*formBody.appendChild(cancelButton);
|
|
|
+ cancelButton.onclick = cancelCallback;*/
|
|
|
+ cancelButton.onclick = () => {
|
|
|
+ while (table.hasChildNodes()) {
|
|
|
+ table.removeChild(table.firstChild);
|
|
|
+ }
|
|
|
+ this.createData(backupData)
|
|
|
+ cancelCallback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ el.appendChild(formBody);
|
|
|
+ }
|
|
|
+
|
|
|
+ let form = new Form(formContainer, {
|
|
|
+ name: 'Anakin',
|
|
|
+ surname: 'Skywalker',
|
|
|
+ married: true,
|
|
|
+ birthday: new Date((new Date).getTime() - 86400000 * 30*365)
|
|
|
+ }, () => console.log('ok'),() => console.log('cancel') );
|
|
|
+
|
|
|
+ form.okCallback = () => console.log('ok2');
|
|
|
+
|
|
|
+ form.validators.surname = (value, key, data, input) => value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(' ') ? true : 'Wrong name';
|
|
|
+
|
|
|
+ form.validators.name = (value, key, data, input) => value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(' ') ? true : 'Wrong name'
|
|
|
+
|
|
|
+/*if(item=='married'){
|
|
|
+ let check=document.createElement('input');
|
|
|
+ check.type='checkbox';
|
|
|
+ if(data[item]==true){
|
|
|
+ check.checked=true;
|
|
|
+ }else{
|
|
|
+ check.checked=false;
|
|
|
+ }
|
|
|
+ td.append(check);
|
|
|
+ }else{*/
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
