Forums

Hi,

I'm not a YUI or javascript expert, but I would really like to use Form to help me validate form fields.

I have a simple mortgage calculator with three input fields (loan_amount, interest_rate, loan_term) and I don't need to submit the form, just detect a click on a Calculate button, perform, the calculation and show the result in a read-only field. However, I do need to validate the 3 input fields before I perform the calculation. At the moment, it looks like validation is performed when the submit event is detected. Since I have my form set up with onsubmit="return(false);", can I configure form to use another event?

TIA,
Nick

Hi Alberto,

Yes I looked at the examples but didn't see anything there on how to either use another event.

Nick

It may make sense to use inline validation:
http://www.greghinch.com/yui3-gallery/docs/Form.html#config_inlineValidation
Setting this to true in your form will validate that individual field as soon as it is changed by the user. You can also set "validateInline" to true on individual fields to just do that on specific ones and not the whole form. Finally, you can call "validateField()" on any field at any time to do the validation when it makes sense for you, but you'll have to define when that is specifically for you application.
Hope that helps!

Hi Greg,

Right, inline validation would work nicely I think.

The bit that confuses me in the code that is generated is that in my markup I have a button like this
<button id="repayment_calculator_submit" type="submit">Calculate</button>
but after calling myForm.render(); it changes to this <button id="repayment_calculator_submit-field" class="field">Calculate</button>

The problem for me is that I have an event listener for the onSubmit that looks like this

function calculateMortgageRepayment(e) {
e.preventDefault();
...
// Use form field contents to do calculation and show result
...
}

So this now isn't called and my Calculate button doesn't work.

How should I get around this?

Thanks,
Nick

Thanks for all your help Alberto.

I have tried to replicate the essential parts of what you had in the jsfiddle example, but even with "submitViaIO: false" in the form config and the
repayment_calculator.get('srcNode').submit = function () {
alert('Pressed submit');
....
}
I am seeing the form get submitted and the alert does not show.

You can see the page with the form on here: https://www.chimneypotsonline.co.uk/ind ... owFormPage
(I'm only working on the lower form at the moment, there are two forms on the page.)
I must have overlooked something so I'll keep staring at the code.

Nick