Проверка правильности формы html5 на asp.Net LinkButton OnClientClick

У меня есть веб-приложение

На главной странице у меня есть форма

<body class="tile-1-bg">
<form id="form1" runat="server">

и на моей странице .aspx

<div class="control-group" runat="server" id="divNome">
    <label for="txtNome" class="control-label">Nome o Ragione Sociale*</label>
    <div class="controls">
        <asp:TextBox runat="server" ID="txtNome" class="form-control input-sm" required></asp:TextBox>
    </div>
</div>
<asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default btn-lg btn-block" Text="REGISTRATI" OnClientClick="if(checkForm())return true; else return false;" OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>

Я хотел бы назвать функцию Javascript, которая имитирует Button submit и возвращает false, если какая-либо проверка не соответствует действительности и показывает ошибки в полях формы.

    function checkForm()
    {
         ?
    }

Как я могу это сделать?

Ответ 1

Вы можете создать свою собственную проверку и вернуть значение. Вам нужно изменить OnClientClick на OnClientClick="return checkForm()"

<div id="errorSummary" style="display: none;">For is invalid!</div>

<script type="text/javascript">
    function checkForm() {
        var formIsValid = false;

        //do your form validation
        if ($("#<%= txtNome.ClientID %>").val() != "") {
            formIsValid = true;
        }

        //show or hide the error message
        if (!formIsValid) {
            $("#errorSummary").show();
        } else {
            $("#errorSummary").show();
        }

        //return the validation result
        return formIsValid;
    }
</script>

Но вы также можете сделать то же самое со сборкой в Validaton Controls и ValidationSummary

<asp:TextBox runat="server" ID="txtNome"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ErrorMessage="Input cannot be empty" ControlToValidate="txtNome" Display="Dynamic">
</asp:RequiredFieldValidator>

<asp:ValidationSummary ID="ValidationSummary1" runat="server" />

<asp:LinkButton runat="server" ID="lnkBtnRegistrati" Text="REGISTRATI"></asp:LinkButton>

Обратите внимание, что атрибут required в полях ввода поддерживается только последними браузерами, см. https://www.w3schools.com/TAgs/att_input_required.asp

Ответ 2

Что вы хотите, так это вернуть результат checkform, вы можете обработать его в checkform методом self:

Код Aspx

изменить

<asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default btn-lg btn-block" Text="REGISTRATI" OnClientClick="if(checkForm())return true; else return false;" OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>

    <asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default  
 btn-lg btn-block" Text="REGISTRATION" OnClientClick="return checkform();"  
 OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>

В вашем javascript методе:

function checkForm()
    {
        if(true) // your condition to check
       {
            return true;

       }
        else{
              return false;
           } 
    }

Объяснение:

В методе разметки Onclientclick будет возвращено, будет ли ваше условие встречено или нет, если ваши условия будут выполнены, тогда вы вернетесь как return true наоборот. так что вы можете достичь того, чего хотите.

Ответ 3

Вы можете вызвать submit() в форме, которая приведет к проверке браузера. Он не имеет возвращаемого значения, но автоматически передает форму. Ваш код не показывает, что вам нужно сделать что-то еще после этого, поэтому возврат true или false в событие OnClientClick не требуется.

document.getElementById("form1").submit();

Но если вы не оставили часть, было бы проще просто заменить кнопку ссылки с помощью

<input type="submit" runat="server" />

Ответ 4

Я рекомендую вам использовать jQuery.validationEngine.

 <html>
 <head>
<script src="../ValidationFiles/jquery.validationEngine-en.js"></script>
<script src="../ValidationFiles/jquery.validationEngine.js"></script>
<link href="../ValidationFiles/validationEngine.jquery.css rel="stylesheet"/>   
<script type="text/javascript">
  jQuery(document).ready(function () {
 jQuery("#form1").validationEngine();
   });
</script>
 </head>
<body>
<form id="#form1">
<asp:TextBox ID="txtEmployeeAddress" runat="server" CssClass="form-control validate[required]"></asp:TextBox>
<asp:Button ID="btnFooterAddPopupSave" runat="server" class="btn btn-primary" Text="Add Category" OnClientClick="return jQuery('#form1').validationEngine();" OnClick="btnFooterAddPopupSave_Click" />
</form>
</body>
</html>

Примечание. Для обязательного добавления "validate [required]" в классе Element.

Ответ 5

Если вы не хотите использовать какие-либо плагины JavaScript и браузер (ы), на которые вы нацеливаете поддержку, вы можете использовать форму HTML5 . checkValidity() и form.reportValidity(). Вы можете проверить поддержку этой функции в отношении отдельных браузеров здесь поддержка формы HTML5 - см. Раздел проверки формы.

Пример использования может быть следующим:

function checkForm() {
  var form = $("#<%= form1.ClientID %>")[0];
  if (!form.checkValidity()) {
    if (form.reportValidity) {
      //Show errors on form fields
      form.reportValidity();
    }
    else {
      //Fall-back for browsers that don't support reportValidity()
    }
    return false;
  }
  return true;
}