Question

我正在尝试验证我的表单。我添加了一个带有自动完成的文本框。有时人们输入随机内容并点击保存。

但我希望他们只使用自动完成数据。所以我在想，如果他们输入一些随机的东西就会出错。

要做到这一点，我发现困难并需要一些指导。

这是我当前代码的样子：

文本框：

    <div class="genericFormText" id="test">Ticket SN:</div>
                        <div class="genericFormField">
                            @Html.TextBoxFor(m=>m.Form.Ser_Num) 
</div>

自动填充代码：

$("#Form_Ser_Num").autocomplete({
            source: "@Url.Action("SerialProdNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=" + $("#Form_Prod_Num").val(),

            minlength: 2,
            delay: 300,
            select: function (event, ui) {
                event.preventDefault();
                event.target.innerText = ui.item.label.split(',')[0];
                $("#Form_Ser_Num_Source").val(ui.item.label.split(',')[1]);
            }
        });

保存：

    var data = $("#ticketDetailsForm").serializeArray();

            $("#TicketDialog").load("@Url.Action("SaveInstallationTicketDetails", "SOP")", data, function () {
                //console.log("Saved suucessfully");
                alert("in save function");

后端代码：

    public PartialViewResult SaveInstallationTicketDetails(InstallationTicketDetailsForm Form, string JobTypeSelected)
    {
        var viewData = new InstallationTicketDetails(Form.Call_Num);
        Form.Save(User.Identity.Name, JobTypeSelected, viewData.SendCompany, viewData.RelayWeight);

        viewData = new InstallationTicketDetails(Form.Call_Num);
        viewData.Form = Form;
        return PartialView("_InstallationTicketDetails", viewData);
    }

对我来说，验证文本框以确保没有添加随机数据且只选择自动编译数据的最佳方法是什么，我们非常感谢任何想法或帮助。

有什么地方我可以用if语句查看数据是否不等于自动完成然后显示警告？

Answer 1

你可以这样做：

change: function( event, ui ) {
  if ( !ui.item ) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i" ), valid = false;

    select.children("option").each(function() {
      if ($(this).text().match(matcher)) {
        this.selected = valid = true;
        return false;
      }
    });

    if (!valid) {
      // remove invalid value, as it didn't match anything
      $(this).val("");
      select.val("");
      input.data("autocomplete").term = "";
      return false;
    }
  }
}

另请参阅see this以获取更多信息和演示。此外，您还可以看到http://jsfiddle.net/pxfunc/j3AN7/

Answer 2

只是想知道为什么你不能检查数据中是否存在输入值？你可以在客户端做到这一点。当您的数据在数组中时，您可以检查数组中是否存在输入的值。或者有什么我想念的东西？

另一种方法是，您可以创建自己的自定义验证属性，然后在模型中使用此属性。

您的属性就像

public class DataExistanceAttribute: ValidationAttribute
{
    public override bool IsValid(object value)
    {
        if (value != null)
        {
            var repo = new Repo(); 
            //Cast it to the data type, i am just casting it to int...
            var enteredValue = (int)value;
            // Code to check if the entered value exists in the database...
            if (reop.DataToCheck.Find(value) == null)
            {
                return false;
            }
        }

        return true;
    }
}

然后在你的模型中

[DataExistance]
public string DataFieldToCheck {get;set;}

Answer 3

您可以使用自动完成的更改事件，如下所示：

change: function(event,ui)
        {
        if (ui.item == null)
            {
               $("#your_input_box").val('');
               $("#your_input_box").focus();
            }
        }

因为它正在做的是没有自动完成输入/选择ui.item将为空。因此，您可以轻松地了解用户是否选择了自动填充条目并限制随机值。

Answer 4

您可以使用typeahead.js。请参阅此link。

在客户端，您可以使用异步ajax调用DB来填充400个值。

然后在服务器端，您可以将所选用户值与DB中的值进行比较。
所以这里基本上会有2个DB调用

一个用于客户端＆amp;另一个用于服务器端进行验证。

希望这有帮助!!

验证文本框 - 数据必须来自自动完成（400个值）

4 个答案: