form validation with baconjs

Question

I recently started playing around with bacon.js, somehow I really like the idea of composing EventStream together in a functional reactive programming style.

I'm currently implementing form validation. Current code:

var name = textInputAsEventStream("#name"); //transforms input to evenStream 
var nameValid = name.map(specificValidationFunction);   //here I validate a name that enters a stream
nameValid.onValue(function(valid){//do something with jquery at the web interface, i.e. feedback of the validation}

Problem is, variables explode when you have like 20 forms to validate. (extreme example) Does anyone has any ideas on how to solve this in a elegant way?

I'm not sure if the code below is really the way to go:

var valid = nameValid.and(surnameValid).and(adressValid).and(codeValid).and(cityValid).and(telValid).and(emailValid); 
//here I compose al 'validition'-streams into one

Any suggestions?

score 0 · Answer 1 · answered May 20 '15 at 12:12

You basically have the right approach. Refactoring common parts into helper functions will help with the boilerplate.

To sort out if the whole form is valid, you can use array methods:

// Add all your validation streams to an array
var validityStreams = [ nameValid, surnameValid, adressValid ]
var formValid = Bacon.combineAsArray(validityStreams)
  .map(function(validityArray) {
    return validityArray.every(function(val) { return val }) 
  })

form validation with baconjs

1 Answers1