3

I really need to have custom or even magento validation for my input field.

Problem is, there is no form in my field, there is only input field.

<input id="item_custom_payment_" name="pay_part_payment" value="" style="" class="input-text item-price validate-greater-than-zero">
<button .... >Submit</button> //calling custom controller action

For example: Comment section in order view page in admin area.

This var customForm = new VarienForm('custom_form'); doesn't work because there is no <form> in my section.

Is there anyway around to validate the input field?

UPDATE

My button looks like this:

<button id="id_5bb6f3992cb320bf703ed93f702dd64a" title="Submit Paid Amount" type="button" class="scalable save paid-amount" onclick="submitAndReloadArea($('order_paid_block_wrap').parentNode, '[admin_url]'); javascript:reload(); return true" style=""><span><span><span>Submit Paid Amount</span></span></span></button>
1
  • You can validate input field using jquery
    – ND17
    Jan 22, 2016 at 4:40

5 Answers 5

7

You can validate individual field like below

Validation.validate($('your-element-id'));

Refer this link

1

Try this:

<input id="item_custom_payment" name="pay_part_payment" value="" style="" class="input-text">
<div style="display: none;" id="validation_item_custom_payment" class="validation-advice">This is a required field.</div>

<button id="id_5bb6f3992cb320bf703ed93f702dd64a" title="Submit Paid Amount" type="button" class="scalable save paid-amount" onclick="submitAndReloadArea($('order_paid_block_wrap').parentNode, '[admin_url]'); javascript:reload(); return true" style=""><span><span><span>Submit Paid Amount</span></span></span></button>

<script>
function submitAndReloadArea() {
    var itemCustomPayment = $('item_custom_payment').value;
    if(itemCustomPayment=='') {
        $('validation_item_custom_payment').show();
        return false;
    }else {
       $('validation_item_custom_payment').hide();
    }
}
</script>
7
  • This will work, however there is "submitAndReloadArea" function called too. Is there a way to prevent? I was looking for more like magento way of doing this btw. Jan 22, 2016 at 5:16
  • updated ans pls check now
    – Abdul
    Jan 22, 2016 at 5:21
  • Or Can you share submitAndReloadArea() code?
    – Abdul
    Jan 22, 2016 at 5:21
  • submitAndReloadArea() is magento core function. So there is nothing we can put inside if(validation). Jan 22, 2016 at 5:23
  • updated ans pls check now
    – Abdul
    Jan 22, 2016 at 5:28
0

If your input isn't inside any other form you just can wrap it with a new <form>, then you'll be able to use VarienForm for validation.

0

It did not work with JQuery for me, but worked with Javascript instead.

Example:

HTML

<input type="text" class="required-entry input-text" name="medium-description" id="medium-description" />

Javascript:

<script type="text/javascript">

isMediumDescriptionValid = Validation.validate(document.getElementById('medium-description'))

if(isMediumDescriptionValid){
  //success action
}else{
  //failure action
}

</script>
0

This is how i validated input fields without form tag. This is working solution.

<div>
<input type="text" name="first" class="bk-firstname" id="bk-firstname" placeholder="Firstname" required="true" > 
                   
<input type="text" name="last" class="bk-lastname" id="bk-lastname" placeholder="Lastname" required="true" >
<input type="text" name="email" email="bk-email" id="bk-email" placeholder="email address" required="true" >
<button id="booking_form_submit" type="submit">Submit</button> 
</div>

$('#booking_form_submit').click(function(e) {
            e.preventDefault();
            var flag = [];
        // must be in reverse order to show html5 validation message in right order
            flag[0] = document.getElementById("bk-email").reportValidity();
            flag[1] = document.getElementById("bk-lastname").reportValidity(); 
            flag[2] = document.getElementById("bk-firstname").reportValidity();
            
            if(flag.every(Boolean)){.  // true if all elements in flag array are true
                // submit form
                /// Your logic here
                console.log('submit');
            }
          
           
            
            

        });

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.