There is such OOP (probably) a script for validation of fields on the client. The question is how to set the default settings for some parameters, for example, there is a phoneCountryCode parameter, depending on whether it is false or true regular expression on which the form will be validated depends. If I just don’t add a parameter, it automatically turns out to be false , but I need the default to be true .

I will also be especially grateful for pointing out errors that I made when writing an existing script in OOP style.

 function Validation(options) { this.fieldElement = document.querySelector(options.fieldSelector); this.typeOfValidation = options.validationType; this.warningMessage = options.warningMessage; this.classMessageCostumize = options.classMessageCostumize; var self = this; //Select type of validate field this.checkField = function() { switch (self.typeOfValidation) { case 'email': checkEmail() break; case 'password': checkPassword() break; case 'phone': checkPhone() break; } } //Function for check Email function checkEmail() { var regExp = /^\w{1,}@\w{2,}\.\w{2,}$/; if (!regExp.test(self.fieldElement.value)) { self.showWarningMessage(); } } //Function for check Password function checkPassword() { var regExp = /^\w{1,}@\w{2,}\.\w{2,}$/; if (!regExp.test(self.fieldElement.value)) { self.showWarningMessage(); } } //Function for check Phone function checkPhone() { var regExp; //Checking for validate cpuntry code or no; if (options.phoneCountryCode == true) { regExp = /^\+\d{12,12}$/; } else { regExp = /^\d{11,11}$/; } if (!regExp.test(self.fieldElement.value)) { self.showWarningMessage(); } } //Add event listener this.fieldElement.addEventListener('blur', self.checkField); //Warning message this.showWarningMessage = function() { var parentElement = this.fieldElement.parentNode; var messageNode = document.createElement('p'); messageNode.innerHTML = this.warningMessage; messageNode.classList.add(this.classMessageCostumize); parentElement.appendChild(messageNode); } } new Validation({ fieldSelector: '.input', validationType: 'phone', buttonSelector: '.button', warningMessage: 'Введите корректный телефон', classMessageCostumize: 'someClass', phoneCountryCode: false, }) 
 <input type="text" class="input">

    1 answer 1

    Added on top 3 lines of code

     function Validation(options) { if (typeof options.phoneCountryCode === 'undefined') { options.phoneCountryCode = true; } this.fieldElement = document.querySelector(options.fieldSelector); this.typeOfValidation = options.validationType; this.warningMessage = options.warningMessage; this.classMessageCostumize = options.classMessageCostumize; var self = this; //Select type of validate field this.checkField = function() { switch (self.typeOfValidation) { case 'email': checkEmail() break; case 'password': checkPassword() break; case 'phone': checkPhone() break; } } //Function for check Email function checkEmail() { var regExp = /^\w{1,}@\w{2,}\.\w{2,}$/; if (!regExp.test(self.fieldElement.value)) { self.showWarningMessage(); } } //Function for check Password function checkPassword() { var regExp = /^\w{1,}@\w{2,}\.\w{2,}$/; if (!regExp.test(self.fieldElement.value)) { self.showWarningMessage(); } } //Function for check Phone function checkPhone() { var regExp; //Checking for validate cpuntry code or no; if (options.phoneCountryCode == true) { regExp = /^\+\d{12,12}$/; } else { regExp = /^\d{11,11}$/; } if (!regExp.test(self.fieldElement.value)) { self.showWarningMessage(); } } //Add event listener this.fieldElement.addEventListener('blur', self.checkField); //Warning message this.showWarningMessage = function() { var parentElement = this.fieldElement.parentNode; var messageNode = document.createElement('p'); messageNode.innerHTML = this.warningMessage; messageNode.classList.add(this.classMessageCostumize); parentElement.appendChild(messageNode); } } new Validation({ fieldSelector: '.input', validationType: 'phone', buttonSelector: '.button', warningMessage: 'Введите корректный телефон', classMessageCostumize: 'someClass', phoneCountryCode: false, }) 
     <input type="text" class="input">

    • and if there are many such parameters, then for each such lines I think to prescribe a clumsy option, are there any other options? - uzi_no_uzi
    • @uzi_no_uzi, you can create a separate default value object, in any case, checks will be needed - Bert