Jquery validate Html.BeginForm с шагами перед отправкой

У меня есть система, которая использует Entity Framework 6.1.1, jQuery UI (комбинированная библиотека) 1.11.1, jQuery Validation 1.13.0 и ASP.Net MVC 5.1.2 Сначала база данных. Я новичок в javascript, поэтому я не совсем уверен, правильно ли я это сделаю.Jquery validate Html.BeginForm с шагами перед отправкой

У меня есть представление, которое имеет различные текстовые поля, которые необходимо заполнить на ступенчатой основе. Я хочу, чтобы эти текстовые поля были проверены до того, как пользователь нажмет кнопку «Далее». Я искал в Интернете решения, и я не могу найти тот, который соответствует моим требованиям. У меня есть все, заключенное в тег Html.BeginForm, поэтому я не могу ссылаться на id для формы, текстовые поля - это EditorFor, и только последняя кнопка - кнопка отправки. Мне удалось получить javascript, который проверяет, заполняются ли все текстовые поля при загрузке страницы, а затем отключает «следующую» кнопку, но потом я не знаю, как заставить его снова проверить текстовые поля, чтобы включить «следующий» "кнопку один раз, все текстовые поля были заполнены Ниже приведен код:.

Это мой взгляд код:

@using (Html.BeginForm("Create", "Events"))

{ @ Html.AntiForgeryToken()

<div class="form-horizontal"> 
    <h4>Event</h4> 
    <hr /> 

    <div class="container"> 
     <div class="row form-group"> 
      <div class="col-xs-12"> 
       <ul class="nav nav-pills nav-justified thumbnail setup-panel"> 
        <li class="active"> 
         <a href="#step-1"> 
          <h4 class="list-group-item-heading">Step 1</h4> 
          <p class="list-group-item-text">General Details</p> 
         </a> 
        </li> 
        <li class="disabled"> 
         <a href="#step-2"> 
          <h4 class="list-group-item-heading">Step 2</h4> 
          <p class="list-group-item-text">Time and Date Details</p> 
         </a> 
        </li> 
        <li class="disabled"> 
         <a href="#step-3"> 
          <h4 class="list-group-item-heading">Step 3</h4> 
          <p class="list-group-item-text">Questionnaire</p> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 


     <div class="row setup-content " id="step-1"> 
      <div class="col-xs-12"> 
       <div class="col-md-12"> 
        <h1 class="text-center"> STEP 1</h1> 

        <div class="form-group" id="eventName" data-toggle="tooltip" data-placement="left" title="Enter an event name"> 
         @Html.LabelFor(model => model.EventName, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventName, new { htmlAttributes = new { @class = "form-control step1" } }) 
          @Html.ValidationMessageFor(model => model.EventName, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group" id="eventDesc" data-toggle="tooltip" data-placement="left" title="Enter a description for the event"> 
         @Html.LabelFor(model => model.EventDescription, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.TextAreaFor(model => model.EventDescription, new { htmlAttributes = new { @class = "form-control step1" } }) 
          @Html.ValidationMessageFor(model => model.EventDescription, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group" id="eventLocation" data-toggle="tooltip" data-placement="left" title="Enter the event location"> 
         @Html.LabelFor(model => model.EventLocation, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventLocation, new { htmlAttributes = new { @class = "form-control step1" } }) 
          @Html.ValidationMessageFor(model => model.EventLocation, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group eventRating" id="eventRating" data-toggle="tooltip" data-placement="left" title="Rate the event between 1 and 10"> 
         @Html.LabelFor(model => model.EventRating, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventRating, new { htmlAttributes = new { @class = "form-control step1" } }) 
          @Html.ValidationMessageFor(model => model.EventRating, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group" id="NoOfEmp" data-toggle="tooltip" data-placement="left" title="Enter the number of employees that can attend this event"> 
         @Html.LabelFor(model => model.NumberOfEmployees, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.NumberOfEmployees, new { htmlAttributes = new { @class = "form-control step1" } }) 
          @Html.ValidationMessageFor(model => model.NumberOfEmployees, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group" id="eventSupplier" data-toggle="tooltip" data-placement="left" title="Enter the name of the event company"> 
         @Html.LabelFor(model => model.EventSupplier, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventSupplier, new { htmlAttributes = new { @class = "form-control step1" } }) 
          @Html.ValidationMessageFor(model => model.EventSupplier, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group" id="eventPic" data-toggle="tooltip" data-placement="left" title="Click the Choose Files button to select an event picture"> 
         @Html.LabelFor(model => model.EventPicture, new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          <div class="btn btn-default btn-file"> 
           <input id="fileInput" type="file" multiple> 
          </div> 
          <input type="button" class="btn btn-primary" value="Upload file" onclick="$('#uploader').submit()" /> 
         </div> 
        </div> 

        <div class="text-center"> 
         <button id="activate-step-2" class="btn btn-primary btn-lg ">Next Step</button> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row setup-content" id="step-2"> 
      <div class="col-xs-12"> 
       <div class="col-md-12 text-center"> 
        <h1 class="text-center"> STEP 2</h1> 

        <div class="form-group" id="eventDays" data-toggle="tooltip" data-placement="left" title="Enter the days which teams can go on this event"> 
         @Html.LabelFor(model => model.EventDays, htmlAttributes: new { @class = "control-label col-md-2" }) 

         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventDays, new { htmlAttributes = new { @class = "form-control" } }) 
          @Html.ValidationMessageFor(model => model.EventDays, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group"> 
         @Html.LabelFor(model => model.EventStart, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventStart, new { htmlAttributes = new { @class = "form-control" } }) 
          @Html.ValidationMessageFor(model => model.EventStart, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group"> 
         @Html.LabelFor(model => model.EventEnd, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventEnd, new { htmlAttributes = new { @class = "form-control" } }) 
          @Html.ValidationMessageFor(model => model.EventEnd, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group" id="eventDuration" data-toggle="tooltip" data-placement="left" title="Enter the number of hours the event can be"> 
         @Html.LabelFor(model => model.EventDuration, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventDuration, new { htmlAttributes = new { @class = "form-control" } }) 
          @Html.ValidationMessageFor(model => model.EventDuration, "", new { @class = "text-danger" }) 
         </div> 
        </div> 
        <button id="activate-step-3" class="btn btn-primary btn-lg">Final Step</button> 
       </div> 
      </div> 
     </div> 
     <div class="row setup-content" id="step-3"> 
      <div class="col-xs-12"> 
       <div class="col-md-12 text-center"> 
        <h1 class="text-center"> STEP 3</h1> 

        <div class="form-group"> 
         @Html.LabelFor(model => model.EventTags, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          @Html.EditorFor(model => model.EventTags, new { htmlAttributes = new { @class = "form-control" } }) 
          @Html.ValidationMessageFor(model => model.EventTags, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group"> 
         @Html.LabelFor(model => model.EventDuration, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10 the-basics"> 
          @Html.EditorFor(model => model.EventDuration, new { htmlAttributes = new { @class = "typeahead form-control", @type = "text", @placeholder = "WHY DOES THIS AND THE ABOVE NOT WORK??" } }) 
          @Html.ValidationMessageFor(model => model.EventDuration, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group"> 
         @Html.LabelFor(model => model.EventDuration, htmlAttributes: new { @class = "control-label col-md-2" }) 
         <div class="col-md-10"> 
          <div id="the-basics"> 
           <input class="typeahead form-control" type="text" placeholder="Tags"> 
           <input class="typeahead form-control" type="text" placeholder="Tags" data-role="tagsinput"> 
          </div> 
          @Html.ValidationMessageFor(model => model.EventDuration, "", new { @class = "text-danger" }) 
         </div> 
        </div> 



        <button id="final" class="btn btn-primary btn-lg" type="submit" value="Create">Finish</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

}

Как видно выше, «следующая» кнопка - это просто кнопка, которая переводит пользователя на следующий шаг, все еще находясь в том же представлении. Также обратите внимание, что есть кнопка «загрузить», поэтому я не знаю, как проверить эту часть. Кнопка «Готово» - кнопка отправки, в которой будет размещена вся информация.

Это мой Javascript код на ту же точку зрения:

<script> 
    var required_ele = document.getElementsByClassName('form-control step1'); 
    var allfilled = true; 
    for (var i = 0; i < required_ele.length; ++i) { 
     var item = required_ele[i]; 
     if (item.value.length == 0) { 
      allfilled = false; 
     } 
    } 

    if (allfilled) { 
     document.getElementById("activate-step-2").disabled = false; 
    } 
    else { 
     document.getElementById("activate-step-2").disabled = true; 

    } 

</script>

С этим Javascript код, он проверяет все текстовые поля в step1 при загрузке страницы, а затем отключает кнопку «Next», потому что они повторно все пусто, но это не повторно проверить текстовые поля, чтобы увидеть, если они заполнены.

Как идти об этом, то есть проверки текстовых полей, чтобы увидеть, если они заполнены и отключение Кнопка «Далее», пока все они не будут заполнены? Обратите внимание на кнопку «Загрузить», как указано выше. Это ссылка на изображение представления: MVC View with steps

Благодаря

источник

2014-09-07 Dillon

Весь ваш сценарий делает это проверить, если что-то было введено, не обязательно, если его действительный (например, он не проверяет, имеет ли поле значение атрибута StringLength). Вы действительно должны называть '$ (" form "). Validate(). Element (yourControl);' для каждой группы элементов. Посмотрите на [этот вопрос/ответ] (http://stackoverflow.com/questions/25643394/mvc-force-jquery-validation-on-group-of-elements/25645097#25645097) для возможного решения. Это несколько иной подход в том, что следующая кнопка не отключена, вместо этого она просто отображает сообщение и предотвращает навигацию, если она недействительна. –

Должен ли я заключить код в вашем примере с кодом, который вы разместили здесь? Я попробовал ваш примерный код, и при загрузке страницы он попадает в часть «$ (« # button »). Нажмите (function()», а затем перепрыгнет через остальную часть кода в этой функции.Кроме того, я использую проверку MVC, поэтому нет необходимости проверять, является ли запись действительной, поскольку MVC будет это делать, jQuery просто должен проверить, что поля были заполнены до того, как пользователь может нажать «следующий», – Dillon

Не знаете, почему вы хотите игнорировать проверку на стороне клиента, но точка связанного кода заключалась в том, что кнопка 'next' фактически не отключена, она просто ничего не делает (кроме отображения сообщения об ошибке), если связанные элементы управления недействительны (или пустым в вашем случае). Альтернативой является обработка события «keyup» для каждого элемента управления, а затем проверка правильности связанных элементов управления, а затем, если оно допустимо, включите кнопку «next». Это существенные накладные расходы по сравнению с первым вариантом. –

Обратитесь к этому основному образцу, который я написал: JSFiddle

<body> 
    <input type="text" placeholder="First Name" id="fn" onkeyup="validateInputs();" /> 
    <input type="text" placeholder="Last Name" id="ln" onkeyup="validateInputs();" /> 
    <input type="submit" value="Submit" id="sb" /> 
</body> 

<script> 
$(document).ready(function() { 
    validateInputs(); 
}); 

function validateInputs() { 
    var firstName = $.trim($('#fn').val()); 
    var lastName = $.trim($('#ln').val()); 

    if (firstName && lastName) { 
     $('#sb').attr("disabled", false); 
    } else { 
     $('#sb').attr("disabled", true); 
    } 
} 
</script>

источник

2014-09-07 13:27:44

Ваш JSFiddle не работает, как есть, вам нужно скопировать и вставить код, который вы указали выше. Что касается моего решения, он отключает кнопку «Следующий», но он не включает его снова, и я думаю, что это связано с тем, что javascript не запускается снова, когда пользователь вводит информацию. Я добавил ваш код, а затем в те части, которые говорят «$ .trim ($ ('# fn'). Val()); Я изменил #fn на #eventName, который является идентификатором моего первого редактора, который я хотел проверить. Так что как-то javascript нужно запустить снова после того, как пользователь что-то ввел. – Dillon

Я просто просмотрел код, ссылаясь на «onkeyup =» validateInputs(); », он не поднимает validateInputs(); поэтому я не знаю, почему это так, но может работать, если onkeyup может выбрать up validateInputs() function – Dillon

@Dillon: Вы пробовали JSFiddle? какую ошибку вы получаете в консоли? –

Jquery validate Html.BeginForm с шагами перед отправкой

ответ

Смежные вопросы