0

I have a form with a class="myfrm" and contains a fieldset made up of input fields. After the fieldset tag I have a div tag and assigned class="ack-msg" which contains an acknowledgement message.

In CSS I have

.myfrm.submitted fieldset {
    display: none;
}
.myfrm.submitted .ack-msg {
    display: block;
}

When the form is submitted the fieldset is replaced by the acknowledgement. This works fine when the form is completed as expected but when the form validation fails a message is displayed but the acknowldgement class="ack-msg" kicks in and replaces the fieldset as if it passed.

The validation is carried out by a javascript function called by the onSubmit on the form. The javascript is listed below and to keep things simple I have a shorted version of the script that only passes the validation if the provided parameter value = 24.

function validateForm(v) 
{
  if(v.value != '24')
  { 
    alert("Oops! Try agan!");
    return false;
  } else { 
    return true;
  }
}

Also, if I inspect the page after validation fails and acknowledgement gets diaplayed form declaration has been updated from class="my-frm" to class="my-frm submitted"

If I should be listing other details please let me know.

Any help welcome on this.

Thanks in advance, Ned

1

1 Answer 1

0

Try to remove the submitted class using javascript, right after the alert. If you have jQuery:

function validateForm(v) 
{
    if(v.value != '24')
    { 
        alert("Oops! Try agan!");
        $.(".my-frm").removeClass("submitted");
        return false;
    } else { 
        return true;
    }
}
3
  • tried that, I still get the same result. Thanks anyway.
    – Ned Cooney
    Jul 22, 2015 at 19:21
  • @NedCooney what do you mean by same result? Is the class still there or has it been removed? If it's still there you probably have to remove it in a later event. Try debugging to check when the class is added and when it is removed, you may learn somehting interesting :) Jul 23, 2015 at 9:06
  • Fabio, yes the submitted class is still there. I tried adding .passed and .failed classes for the message and ack classes for to distinguish validation but it's messy. I think the best way is to implement in a different way. I'm working on it now and will post the final working answer but removing the submitted class doesn't resolve the issue.
    – Ned Cooney
    Jul 23, 2015 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.