Menu icon Foundation
Abide with server validation

I had a question since I'm trying to do some validation on a form. This is a change password form and I need more than simple pattern checking. I need to ensure the new password != the old password and that the new password is the same as the confirm password (typical 3 field change password form).

I had a look here http://foundation.zurb.com/docs/components/abide.html but wasn't sure that I could code this type of custom validator within abide. I thought about listening for the valid event and triggering invalid if my constraints weren't met, but that seemed a little hacky.

Any ideas? I'm sure you must have come across more that simple validation needs in your work.

abideAJAX

I had a question since I'm trying to do some validation on a form. This is a change password form and I need more than simple pattern checking. I need to ensure the new password != the old password and that the new password is the same as the confirm password (typical 3 field change password form).

I had a look here http://foundation.zurb.com/docs/components/abide.html but wasn't sure that I could code this type of custom validator within abide. I thought about listening for the valid event and triggering invalid if my constraints weren't met, but that seemed a little hacky.

Any ideas? I'm sure you must have come across more that simple validation needs in your work.


Jordan Humphreys gave the most helpful answer for this post
Jordan Humphreys almost 6 years ago

You can use the new data-equalto attribute on your confirmation input element:

<input name="password" type="password" id="userPassword">
<input name="password_confirmation" data-equalto="userPassword">

Matt Kelly almost 6 years ago

Triggering the invalid event might work. Why don't you try just adding the error classes manually. This let's you keep the error messages consistent with Abide, and since you are not really using any of the existing error checking, you can just write your own custom validation code.

David Kavanagh almost 6 years ago

After I sent this question, I did end up hooking into onload() and setting up listeners on the form. I'm extracting the form data and doing the additional validation. I just didn't figure out how to spit out the validation errors properly.

Jordan Humphreys almost 6 years ago

You can use the new data-equalto attribute on your confirmation input element:

<input name="password" type="password" id="userPassword">
<input name="password_confirmation" data-equalto="userPassword">

David Kavanagh almost 6 years ago

I appreciate the data-equalto feature. I have other more complex validation as well, so I'm also trying to get the general case of adding custom validation working. I just to back to this and still have 2 issues;
- my "valid" listener is called, and I can test values, but I don't know how to block the form from submitting when my code finds a validation error.
- showing error messages.. I can add text to an error div, but is there any hook I can call to do this in a more friendly way?

David Kavanagh almost 6 years ago

Looking at the form validate code, It looks like there is no provision for a "valid" listener to deny validation.

Once validation checks pass, this code is run;

  if (/submit/.test(e.type)) {
    form.trigger('valid');
  }

  form.removeAttr('data-invalid');

At this point, it is assumed all is good. Getting a value back from the valid listener(s) if any to give them an opportunity to deny validation would be great here! I'm trying to think of some way to hack this now that I see there isn't any sanctioned path forward.

Abdul over 5 years ago

 $("#RecordAddForm").on("valid invalid submit", function(g){
  g.stopPropagation();
  g.preventDefault();
  if (g.type === "valid"){
    var senddata = '/tbcs/widgets/uniqueRecord?comp='+$('#RecordCompanyName').val()+'&cont='+$('#RecordCountry').val()+'&vert='+$('#RecordVertical').val();
  //alert(senddata);
  $("#RecordVertical").addClass("ui-autocomplete-loading");
  $.ajax({
    url: senddata,
    success: function(data){
      if(data==1){
        $("#RecordAddForm").submit();
      }else{
        $( "#uniquerecord" ).removeClass( "nodisplay" );
        $( "#uniquerecord" ).addClass( "yesdisplay" );
        return false;
      }
    }
  });
  }
});

i'm using above Ajax code, it is validating the form correctly but form is not submitting.
Please help.

Thanks in advance

thangtm150892 about 1 year ago

thanks friend