Want to check jquery autocomplete has valid data or not upon submit button click in MVC

Question

0.00/5 (No votes)

See more:

I want to validate user input in autocomplete function on button click. If user select proper data from database then it displays successful message else it should show that please select correct data. Currently, the same functionality is working on

response

but I want the same functionality upon

Produce Page

button click. Anyone please guide me.

What I have tried:

<pre>$("#txtemployee").autocomplete({
        source: function (request, response) {
           $.ajax({
                url: '/Home/AutoComplete/',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "Post",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                  return {
                            value: item.empName,
                            id: item.empId
                        };
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (event, ui) {
             $("#hiddenempId").val(ui.item.value);
             $("#hiddenempId").val(ui.item.id);

        },
        response: function (event, ui) {
        if (!ui.content.length) {
             $("#message").text("No results found");               
        }
        else {
            $("#message").empty();
        }
    },
        minLength: 3
    });
});

My .cshtml looks:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
 {
     @Html.TextBoxFor(m => m.txtName)
     @Html.HiddenFor(m => m.hiddenFId)
     @Html.ValidationMessageFor(m => m.txtName, "", new { @class = "error" })                      
     <span id="message"></span>                                    
     <button type="submit" id="submit">Produce Page</button>

 }

[HttpPost] 
public ActionResult Index(ClsHome clshome) 
{ 
return View(clshome.produceData());
 }

I want to restrict user to click on produce page button as entered data is invalid. How to achieve this. Please help me. Thank you.

Posted 22-Jan-18 19:40pm

Rajeshyadav12

Updated 23-Jan-18 0:30am

Add a Solution

2 solutions

Solution 1

Hi Rajesh,

I have implemented something similar in JS Fiddle.Please check how i did that.But, please don't copy paste the whole code as it will be irrelevant for you.In you case when you are clicking the button you need to put

ui.content.length

this code in a variable and based on that variable you need to response back to server with return true;

Edit fiddle - JSFiddle[^]

Posted 22-Jan-18 21:34pm

debasish mishra

Comments

Rajeshyadav12 23-Jan-18 14:35pm

@debasish, This solution is not working. If I put Apple1 then also it is showing successful. Can you please provide me a solution relevant to my question. It will be really appreciated. Thank you.

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2018-01-23T00:30:00

write a javascript function to check the textbox value from server using ajax call , refer the following code and modify it accordingly on your needs.

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.TextBoxFor(m => m.txtName)
    @Html.HiddenFor(m => m.hiddenFId)
    @Html.ValidationMessageFor(m => m.txtName, "", new { @class = "error" })
    <span id="message"></span>
    <button onclick="Validate()"> Produce Page </button>
    <button style="display:none" type="submit" id="submit"></button>

}

function Validate() {
       var val = $('#txtemployee').val();
       var obj = { name: val };
       $.ajax({
           url: '/Home/CheckValidEmp/',
           data: obj,
           dataType: "json",
           type: "Post",
           contentType: "application/json; charset=utf-8",
           success: function (data) {
               if (data && data.empId) {
                   $("#hiddenempId").val(data.empId);
                   // success
                   $('#submit').click();

               }
               else {
                   alert('Not a valid Employee ');
               }


           },
           error: function (response) {
               alert(response.responseText);
           },
           failure: function (response) {
               alert(response.responseText);
           }
       });
   }

[HttpPost]
      public JsonResult CheckValidEmp(string name)
      {
           // find the employee based on the name
          EmployeeClass emp = getEmployee(name);
          return Json(emp);
      }

Want to check jquery autocomplete has valid data or not upon submit button click in MVC

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Want to check jquery autocomplete has valid data or not upon submit button click in MVC

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us