简体   繁体   中英

input validation vs. required to submit on multi-page forms

i have a multi-page form that i am trying to validate using jquery validate. the user has essentially 4 options: next , prev , save , submit .

save , next , and prev all save the current page to the form as a whole; submit is the same as save , but fires some additional workflow-related functions then heads off to another part of the site.

i need to validate the user input at all times. the jquery validate is working great. but... i need to have some fields set as required. because the form is saved at each step, the input needs to always be valid, but i don't need the required validation until the very end (on submit ).

the form is building a dynamic list of validations specific to the page it is on, like:

$(document).ready(function() {
    $("#ctl01").validate({ onsubmit: false });
    $("#_Qn_0e868ebe").rules("add", { maxlength: 200 });
    $("#_Qn_d69e75a4").rules("add", { number: true });
    $("#_Qn_adffbdec").rules("add", { maxlength: 200 });
    $("#_Qn_adffbdec").rules("add", { digits: true });
});

so now, for required fields, i've added a .isrequired class to them, and i've decoupled the <asp:linkbutton> s to fire this client script:

function FormIsValid(sender, ishardsubmit) {
    var form = $("#ctl01");
    form.validate();
    if (form.valid()) {
        //if (ishardsubmit) {
        //    if (!IsRequiredValid()) { return false; }
        //}
        __doPostBack(sender, '');
    }
    return;
}

this part (the input validation part) is working great so far. the part i commented out is the part that is working not so great. it fires this function, in which i was trying to dynamically add required validators and re-evaluate the form. i can see it hit the .each loop for each of my required fields, but it doesn't seem to be working since it passes true back, even when required fields are empty.

function IsRequiredValid() {
    var $requiredgroup = $(".isrequired");
    $requiredgroup.each(function (i, item) {
        $(item).rules("add", { required: true });
    });
    form.validate();
    return form.valid();
}

i toyed with the idea of dropping the .net required field validators in to do this part, but i want to, if possible, stick with a single solution. especially since this feels so close to working.

thoughts? help? thanks!

Your jQuery .each() method is constructed improperly.

You want to target the whole object in your iteration, not key/value pairs. So remove i, item from the function arguments and use $(this) as the target selector.

function IsRequiredValid() {
    var $requiredgroup = $(".isrequired");
    $requiredgroup.each(function() {
        $(this).rules("add", { required: true });
    });
    // form.validate(); // remove this line -> 100% superfluous
    return form.valid();
}

Regarding your form.validate() line in both functions: You cannot call .validate() more than once on the page. It's only meant to be called once to initialize the plugin on your form.

Calling it subsequent times will have no effect. Otherwise, we wouldn't need to use the .rules() method as we would simply call .validate() any time we need to change rules. However, this is definitely not the case.

Add a class to your required fields called something like: "SubmitRequired" Implement two functions as follows:

function SaveClick(){
//ignore SubmitRequired on save (and any disabled fields)
  $("form").validate({ ignore: ".SubmitRequired, [disabled]" });  

  if $("form").valid()
  {
    do something;
  }
}

function SubmitClick(){
//ignore only disabled fields (if any))
  $("form").validate({ ignore: "[disabled]" });  

  if $("form").valid()
  {
    do something;
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM