Additional validation message displayed on mvc app

Question

I have a simple mvc web app, that is searching transactions in the DB using a specified search parameter(named RA number), now I decided to add jquery block ui on my app and I then realized the block fires even when an empty string("" single or double space bar in textbox) is entered.

I have data annotation in my RA view model, I then added an AllowEmptryStrings = false attribute on my view model property, see code below

public class SearchByRAViewModel
{
    [Required(ErrorMessage = "Please enter an RA number",AllowEmptyStrings = false)]
    public string RANumber { get; set; }
}

Here is my action method from my controller code

public ActionResult SearchTollTransactions(SearchByRAViewModel raViewModel)
{
    List<TollScrapingTransactionScreen> tollScrapingList = new List<TollScrapingTransactionScreen>();
    if (ModelState.IsValid)
    {
        tollScrapingList = GetTransactionByRA(raViewModel.RANumber);
        ViewBag.RANumber = raViewModel.RANumber;
        return View(tollScrapingList);
    }
    else
    {
        return View("Index");
    }
}

My only problem now is, there seems to be an extra validation message displayed on the search page(index) if there is an empty string in the search text box, see screenshot

Here is my block ui section, in case someone wonders where it is

$('#btnSearch').click(function () {
    // there should be at least a value for ra before firing the blockui
    var raValue = $('#raNumber').val();
    if (!raValue || raValue.trim() === '') {
        return;
    }
    else {
        $.blockUI();
    }
});

This is the part of my view, which is inside the normal @using(Html.BegingForm)

<div class="form-horizontal">
    <div class="form-group">
        <div class="panel panel-default">
            <div class="panel-heading">Search by RA number</div>
            <div class="panel-body">
                <div class="col-sm-12">
                    <table class="table form-table">
                        <tr>
                            <th class="col-sm-2">@Html.DisplayNameFor(model => model.RANumber)</th>
                            <td class="col-sm-10">
                                @Html.TextBoxFor(model => model.RANumber, new { @class = "form-control", @tabindex = 1, @id = "raNumber" })
                                @Html.ValidationMessageFor(model => model.RANumber)
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="btn-toolbar col-sm-12">
                    <input type="submit" value="Search Transaction" class="btn pull-right" tabindex="2" id="btnSearch" />
                </div>

            </div>
        </div>
    </div>
</div>