-
-
Save mii9000/3b5d82d262fa3303be1c3f133d37932b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Template | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <form action="#"> | |
| <input type="text" id="name"> | |
| <br> | |
| <input type="text" id="card"> | |
| <br> | |
| <input type="text" id="valid"> | |
| <br> | |
| <input type="text" id="security"> | |
| </form> | |
| <div id="message"></div> | |
| </body> | |
| </html> | |
| */ | |
| console.clear(); | |
| var nameInput = document.querySelector('#name'); | |
| var cardInput = document.querySelector('#card'); | |
| var dateInput = document.querySelector('#valid'); | |
| var securityInput = document.querySelector('#security'); | |
| var formFeedback = document.querySelector('#message'); | |
| function setFeedbackText(value) { | |
| return formFeedback.textContent = value; | |
| } | |
| var inputName$ = Rx.Observable.fromEvent(nameInput, 'input') | |
| .map(function(e) { return e.target.value.toUpperCase() }) | |
| .startWith(''); | |
| var inputCard$ = Rx.Observable.fromEvent(cardInput, 'input') | |
| .map(function(e) { return e.target.value }) | |
| .startWith(''); | |
| var inputDate$ = Rx.Observable.fromEvent(dateInput, 'input') | |
| .map(function(e) {return e.target.value}) | |
| .startWith(''); | |
| var inputSecurity$ = Rx.Observable.fromEvent(securityInput, 'input') | |
| .map(function(e) {return e.target.value}) | |
| .startWith(''); | |
| var validLengthName$ = inputName$ | |
| .map(function(value) {return value.length < 50}) | |
| .startWith(true); | |
| var validLengthCard$ = inputCard$ | |
| .map(function(value) {return value.length < 20}) | |
| .startWith(true); | |
| var validLengthDate$ = inputDate$ | |
| .map(function(value) {return value.length < 8}) | |
| .startWith(true); | |
| var validLengthSecurity$ = inputSecurity$ | |
| .map(function(value) {return value.length < 4}) | |
| .startWith(true); | |
| var validForm$ = Rx.Observable.combineLatest( | |
| inputName$, | |
| inputCard$, | |
| inputDate$, | |
| inputSecurity$, | |
| function(inputName, inputCard, inputDate, inputSecurity) { | |
| return inputName.length > 1 | |
| && inputCard.length > 18 | |
| && inputDate.length > 6 | |
| && inputSecurity.length > 2 | |
| }) | |
| .startWith(false); | |
| var formInput = Rx.Observable.combineLatest( | |
| inputName$, | |
| inputCard$, | |
| inputDate$, | |
| inputSecurity$, | |
| validLengthName$, | |
| validLengthCard$, | |
| validLengthDate$, | |
| validLengthSecurity$, | |
| validForm$, | |
| function(inputName, inputCard, inputDate, inputSecurity, validLengthName, validLengthCard, validLengthDate, validLengthSecurity, validForm) { | |
| return { | |
| inputName$: inputName, | |
| inputCard$: inputCard, | |
| inputDate$: inputDate, | |
| inputSecurity$: inputSecurity, | |
| validLengthName$: validLengthName, | |
| validLengthCard$: validLengthCard, | |
| validLengthDate$: validLengthDate, | |
| validLengthSecurity$: validLengthSecurity, | |
| validForm$: validForm | |
| } | |
| }) | |
| var result = formInput.subscribe(function(state) { | |
| console.clear(); | |
| console.log(state); | |
| nameInput.value = state.inputName$; | |
| cardInput.value = state.inputCard$; | |
| if (!state.validForm$) { | |
| setFeedbackText('Form not fulfilled'); | |
| } else if (!state.validLengthName$) { | |
| setFeedbackText('Invalid name'); | |
| } else if (!state.validLengthCard$) { | |
| setFeedbackText('Invalid card'); | |
| } else if (!state.validLengthDate$) { | |
| setFeedbackText('Invalid date'); | |
| } else if (!state.validLengthSecurity$) { | |
| setFeedbackText('Invalid security code'); | |
| } else { | |
| setFeedbackText('Form ok :D'); | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment