andreloureiro/rx-form-validation.js

## rx-form-validation.js
/*

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');
  }

})
	/*

	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');
	}

	})