Skip to content

Instantly share code, notes, and snippets.

@mii9000
Forked from andreloureiro/rx-form-validation.js
Created November 7, 2016 11:40
Show Gist options
  • Save mii9000/3b5d82d262fa3303be1c3f133d37932b to your computer and use it in GitHub Desktop.
Save mii9000/3b5d82d262fa3303be1c3f133d37932b to your computer and use it in GitHub Desktop.
/*
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