Using Javascript to validate response in the text box

Question

I am new to Magento. I have the following requirements.

A page has a text box where the customer enters an id. Once the id is entered, I need to check whether this id is available in the OMS using a OMS webservice call. And if the id is valid, I need to enable the submit button in the page. If the id is invalid I need to disable the submit button. Could someone give me some direction on this.

Thanks

Update: I tried to do this using the following code, Javascript: The function will called on click of the submit button

                   submit.onclick = function()
                    {
                        $.ajax
                        ({
                            url: "<?php echo $this->getUrl('checkout/OnepageController/checkid')?>",
                            type: "POST",
                            data: {id: '2345'},
                            dataType: json,
                            success: function(data) {
                                status = data;
                            }
                        });
                    if (status=='invalid')
                        {
                            alert('id function was not hit');

                            return false; // cancel submission
                        }
                    else if (status=='valid')
                        {
                        alert('id function was hit');
                        return true;
                        }
                    }

Php: Magento Controller

public function checkidAction()
{
    $id = $_POST['id'];
    if ($id=='1234')
    {
    $status = "valid";
    }
    else
    {
        $status ="invalid";
    }

    echo json_encode($status);
}

Could you please tell me if something is wrong here. I am not able to get the status information back to the ajax call. Thanks

Answer 1

I would use magento form validation class, then create a new "remote validation", take a look at Magento form field AJAX validation

In your phtml file add

<script>

Validation.add('validate-customer-id', 'Please enter a valid id. For example xxx-yy-mmm.', function(v) {     

    // do your OMS webservice call in your controller 
    // you could use post this need to be secure
    var url = '<?php echo $this->getUrl('checkout/OnepageController/checkid', array('id' => 2345))?>' + encodeURIComponent(v);

    var result = false;

    new Ajax.Request(url, {
        method: 'get',
        asynchronous: false,
        onSuccess: function(transport) {
            var obj = response = eval('(' + transport.responseText + ')');

            if (obj.is_available === 0) {
                result = false;
            } else {
                result = true; /* return true or false */    
            }
        }
    })

    return result;
});

</script>

Update your input with

<input ... class=".. validate-customer-id" />

In your controller

public function checkidAction()
{
    $id = $this->getRequest()->getParam('id');
    if ($id=='1234')
    {
       $status = array('is_available' => 0);
    }
    else
    {
       $status = array('is_available' => 1);
    }

    echo json_encode($status);
}

Also see Magento prototype custom validation