0

I have the below Calculator Form which I'm creating in Magento that I would like to be able to use Magento's in-built JavaScript validations, even though I need to validate on a button click rather than a form submit.

Most of the logic is done through jQuery from a phtml file that I've added with a custom module, that has it's own frontend route, basically example.com/calculator.

Below is a simplified version of what I have:

<div id="calculator">
    <form id="calculator_form">
        <ul>
            <li>
                <h2><span class="count">1</span> Enter Values</h2>
                <div class="row-section">
                    <div class="row-content">
                        <label>Length</label>
                        <div class="input-box">
                            <input type="text" class="height-val input-text required-entry">
                        </div>
                    </div>
                    <div class="row-content">
                        <label>Width</label>
                        <div class="input-box">
                            <input type="text" class="wall-width input-text required-entry">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </form>
    <button onclick="calculate();" class="button"><span><span>Calculate</span></span></button>
    <div class="result">
        <strong>Your Results</strong>
        <p class="result-text"></p>
    </div>
</div>
<script type="text/javascript">
    function calculate() {
        var calculator_form= new VarienForm('calculator_form', true);
        // Callculations & Much More Form Logic is Here
        // Includes a Lot of jQuery
        jQuery('.result-text').html('Your results are:' + results);
    }
</script>

I kind of have it working with var calculator_form= new VarienForm('calculator_form', true); but it's not showing the validation message, it just highlights the first form field when I click on the Calculate button.

What am I missing? Any help would be really appreciated. js/prototype/validation.js is being loaded on the page.

UPDATE

I almost got it working with the below. I put var calculatorForm= new VarienForm('calculator-form', true); into a separate script tag, and moved the button within the <form> tags. The validation works properly but when I click on the button it refreshes the page when there are no validation errors.

<div id="calculator">
    <form id="calculator-form">
        <ul>
            <li>
                <h2><span class="count">1</span> Enter Values</h2>
                <div class="row-section">
                    <div class="row-content">
                        <label>Length</label>
                        <div class="input-box">
                            <input type="text" class="height-val input-text required-entry">
                        </div>
                    </div>
                    <div class="row-content">
                        <label>Width</label>
                        <div class="input-box">
                            <input type="text" class="wall-width input-text required-entry">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <button type="submit" onclick="calculate();" class="button"><span><span>Calculate</span></span></button>
    </form>
    <div class="result">
        <strong>Your Results</strong>
        <p class="result-text"></p>
    </div>
</div>
<script type="text/javascript">
    function calculate() {
        // Callculations & Much More Form Logic is Here
        // Includes a Lot of jQuery
        jQuery('.result-text').html('Your results are:' + results);
    }
</script>
<script type="text/javascript">
    var calculatorForm= new VarienForm('calculator-form', true);
</script>
0

There is a space in form id var myForm= new VarienForm('#calculator form', true);

Correct base on your code is var myForm= new VarienForm('#calculator_form', true);

Also make sure validation.js is loaded

Edit: that's a start. Do you have any console errors? Some how validation can't append the error div... Also try to put the new VarienForm in separate script tags

Edit 2: Try this separately

<script type="text/javascript"> 
    //< ![CDATA[ 
    var calculator_form = new VarienForm('calculator_form'); 
    //]]>
</script>
0

Got it, I had to use Validation.validate($('calc-height')); in the same function being called by the button, to validate individual fields.

Works pretty well, but if anyone knows of another way, I'd be interested to hear.

<div id="calculator">
    <form id="calculator-form">
        <ul>
            <li>
                <h2><span class="count">1</span> Enter Values</h2>
                <div class="row-section">
                    <div class="row-content">
                        <label>Length</label>
                        <div class="input-box">
                            <input type="text" id="calc-height" name="calc-height" class="required-entry">
                        </div>
                    </div>
                    <div class="row-content">
                        <label>Width</label>
                        <div class="input-box">
                            <input type="text" id="calc-width" name="calc-width" class="required-entry">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <button type="submit" onclick="calculate();" class="button"><span><span>Calculate</span></span></button>
    </form>
    <div class="result">
        <strong>Your Results</strong>
        <p class="result-text"></p>
    </div>
</div>
<script type="text/javascript">
    function calculate() {
        v1 = Validation.validate($('calc-height'));
        v2 = Validation.validate($('calc-width'));
        if(v1 && v2) {
            // Callculations & Much More Form Logic is Here
            // Includes a Lot of jQuery
            jQuery('.result-text').html('Your results are:' + results);
        }
    }
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.