Validate input filed without form

Question

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>

Answer 1

You can validate individual field like below

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

Refer this link

Answer 2

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>

Answer 3

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.

Answer 4

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>

Answer 5

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');
            }
          
           
            
            

        });