|
@@ -1,5 +1,6 @@
|
|
|
//Form
|
|
|
function Form(el, data, okCallback, cancelCallback){
|
|
|
+ let backUp = {};
|
|
|
let formBody = document.createElement('div');
|
|
|
let okButton = document.createElement('button');
|
|
|
okButton.innerHTML = 'OK';
|
|
@@ -11,8 +12,7 @@ function Form(el, data, okCallback, cancelCallback){
|
|
|
const table = document.createElement('table');
|
|
|
formBody.append(table);
|
|
|
|
|
|
- let flag = true;
|
|
|
-
|
|
|
+ let flag = false;
|
|
|
this.validators = {};
|
|
|
|
|
|
//Отображение
|
|
@@ -34,10 +34,10 @@ function Form(el, data, okCallback, cancelCallback){
|
|
|
if(data[key] === '') {
|
|
|
inp.style.border = '2px solid #f00';
|
|
|
td.append(inp);
|
|
|
- flag = true
|
|
|
+ flag = false;
|
|
|
} else {
|
|
|
td.append(inp);
|
|
|
- flag = false
|
|
|
+ flag = true;
|
|
|
}
|
|
|
if (key.slice(0,1) === "*") {
|
|
|
th.innerHTML = `<strong>${key.slice(1)} <sup style="color: red">*</sup></strong>`;
|
|
@@ -53,11 +53,11 @@ function Form(el, data, okCallback, cancelCallback){
|
|
|
inp.onchange = () => {
|
|
|
if(data[key] === '') {
|
|
|
inp.style.border = '2px solid #f00';
|
|
|
- flag = true;
|
|
|
+ flag = false;
|
|
|
}
|
|
|
else {
|
|
|
inp.style.border = '2px solid #000';
|
|
|
- flag = false;
|
|
|
+ flag = true;
|
|
|
}
|
|
|
if (key in this.validators) {
|
|
|
if (strError !== '') strError = '';
|
|
@@ -65,12 +65,12 @@ function Form(el, data, okCallback, cancelCallback){
|
|
|
if (res === true){
|
|
|
strError = res.toString();
|
|
|
tdError.style.color = '#000';
|
|
|
- flag = false;
|
|
|
+ flag = true;
|
|
|
}
|
|
|
else {
|
|
|
strError = res.toString();
|
|
|
tdError.style.color = '#F00';
|
|
|
- flag = true;
|
|
|
+ flag = false;
|
|
|
}
|
|
|
tdError.textContent = strError;
|
|
|
tr.append(tdError);
|
|
@@ -79,30 +79,29 @@ function Form(el, data, okCallback, cancelCallback){
|
|
|
}
|
|
|
if (typeof okCallback === 'function'){
|
|
|
formBody.appendChild(okButton);
|
|
|
- okButton.onclick = (e) => {
|
|
|
- console.log(this);
|
|
|
- this.okCallback(e);
|
|
|
+ if (flag === true){
|
|
|
+ okButton.disabled = false;
|
|
|
+ okCallback(data);
|
|
|
+ okButton.onclick = (e) => {
|
|
|
+ console.log(this);
|
|
|
+ this.okCallback(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ okButton.disabled = true;
|
|
|
}
|
|
|
}
|
|
|
if (typeof cancelCallback === 'function'){
|
|
|
formBody.appendChild(cancelButton);
|
|
|
- cancelButton.onclick = cancelCallback;
|
|
|
+ cancelButton.onclick = () => {
|
|
|
+ backUp = {...data};
|
|
|
+ table.remove();
|
|
|
+ cancelCallback();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
el.appendChild(formBody);
|
|
|
-
|
|
|
- //OkButton
|
|
|
- this.OkButton = () => {
|
|
|
- if (flag === false){
|
|
|
- okCallback(data)
|
|
|
- }
|
|
|
- }
|
|
|
- //CancelButton
|
|
|
- this.CancelButton = () => {
|
|
|
- data = null;
|
|
|
- }
|
|
|
this.okCallback = okCallback;
|
|
|
- //CancelButton
|
|
|
this.cancelCallback = cancelCallback;
|
|
|
this.data = data;
|
|
|
}
|
|
@@ -148,11 +147,11 @@ let form = new Form(formContainer, {
|
|
|
'*name': 'Anakin',
|
|
|
surname: 'Skywalker',
|
|
|
married: true,
|
|
|
- birthday: new Date((new Date).getTime() - 86400000 * 30*365)
|
|
|
+ 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) =>
|
|
|
+form.validators.surname = (value, key, data, input) =>
|
|
|
value.length > 2 && value[0].toUpperCase() === value[0] && !value.includes(' ')
|
|
|
? true : 'Wrong name'
|
|
|
console.log(form)
|