Checking form validity with Observables

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css">
<form>
  <input type="text" placeholder="field1" id="field1"></input>
  <input type="text" placeholder="field2" id="field2"></input>
</form>
<p>
The form is currently: <strong id="validity">Invalid</strong>
</p>

Babel + JSX

const field1$ = Rx.Observable.fromEvent(document.getElementById('field1'), 'input').map(ev => ev.target.value);
const field2$ = Rx.Observable.fromEvent(document.getElementById('field2'), 'input').map(ev => ev.target.value);

const isValid$ =
	Rx.Observable.combineLatest(field1$, field2$)
  .map(fields => fields.every(field => field.length > 0));
  
isValid$.subscribe(isValid => document.getElementById('validity').innerHTML = isValid ? 'Valid' : 'Invalid');