Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › Data Bridge › Validation Tooltips for Spry › jquery validation message won't dissappear

jquery validation message won't dissappear

Thread began 7/29/2018 4:38 pm by danielsebas | Last modified 8/20/2018 5:01 pm by Ray Borduin | 1178 views | 8 replies |

7/29/2018 4:38 pm | #1 danielsebas

jquery validation message won't dissappear

Hi Ray, I am using a form in a bootstrap modal and using the following code to make the jquery validation messages disappear if I close the modal:

<script>
$("#myModal").on("hidden.bs.modal", function () {
    // put your default event here
	document.getElementById("nombres_waerror_errorMsg_wrapper").style.display = 'none',
	document.getElementById("celular_waerror_errorMsg_wrapper").style.display = 'none',
	document.getElementById("email_waerror_errorMsg_wrapper").style.display = 'none',
	document.getElementById("Security_Code_1_waerror_errorMsg_wrapper").style.display = 'none';
});
</script>

The code works well, but when the form is sent and the server validation fails the code won't work in all the fields and when I close the modal the captcha image validation message won't disappear.

7/30/2018 10:57 am | #2 Ray BorduinWebAssist

In your server validation use spans like this:
<span id="mensaje_ServerError">el código de la imagen es incorrecto</span>

Give it an id that is = "FieldName_ServerError"

Then it will convert the server error to a jquery html5 validation error when the page loads and it will work with your existing code.

Did this help? Tips are appreciated...

8/06/2018 11:13 pm | #3 danielsebas

Thank you Ray, I put the span tags, but still after server validation If I try jQuery validation the messages still won't disappear when I close the modal.

8/07/2018 10:31 am | #4 Ray BorduinWebAssist

Can I get a URL to see the issue live? I'll take a look and see if I can spot the problem.

Did this help? Tips are appreciated...

8/08/2018 10:19 pm | #5 danielsebas

Hi Ray, you can find the issue in this page by clicking at the bottom right of the image where it say: SOLICITAR COTIZACION

http://www.dewaltcenter.com.ec/detalles.php?producto=120

Thank you

8/09/2018 9:20 am | #6 Ray BorduinWebAssist

It appears the issue is that it won't show the error when the modal isn't open.

On your page you have:

<script>
var cotizacion_Opts = {
    focusout: true,
    focusin: false,
    change: false,
    keyup: false,
    popupClass: "DeWalt",
    pointedAt: "left",
    fieldOffset: 60,
    fieldMargin: 2,
    position: "left",
    direction: "right",
    border: 1,
    offset: 25,
    closeText: "✖",
    percentWidth: 100,
    orientation: "top"
  };
function cotizacion_Validate() {
    $("#cotizacion").h5Validate(cotizacion_Opts);
  }
$(document).ready(function () {
  cotizacion_Validate()
  ConvertServerErrors(cotizacion_Opts);
});
</script>
<script>
$(document).ready(function(){
    // Show the Modal on load
$("#myModal").modal("show");
});
</script>

Try changing the order so that the modal is open before the validation initiates like:

<script>
$(document).ready(function(){
    // Show the Modal on load
$("#myModal").modal("show");
});
</script>
<script>
var cotizacion_Opts = {
    focusout: true,
    focusin: false,
    change: false,
    keyup: false,
    popupClass: "DeWalt",
    pointedAt: "left",
    fieldOffset: 60,
    fieldMargin: 2,
    position: "left",
    direction: "right",
    border: 1,
    offset: 25,
    closeText: "✖",
    percentWidth: 100,
    orientation: "top"
  };
function cotizacion_Validate() {
    $("#cotizacion").h5Validate(cotizacion_Opts);
  }
$(document).ready(function () {
  cotizacion_Validate()
  ConvertServerErrors(cotizacion_Opts);
});
</script>

Did this help? Tips are appreciated...

8/16/2018 2:00 pm | #7 danielsebas

Hi Ray, I change the order of the validation scripts, but still doesn't work. I also noticed that the query validation not always appear in place and sometimes they appear cutoff.
Thank you.
Regards,

Daniel

8/16/2018 5:54 pm | #8 Ray BorduinWebAssist

I played around with it and I had to add a timeout to wait for the window to slide into view before displaying the error messages. It should be working properly now.

Did this help? Tips are appreciated...

8/20/2018 1:54 pm | #9 danielsebas

Thank you Ray

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.