close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

jquery validation message won't dissappear

Thread began 7/29/2018 7:38 pm by danielsebas | Last modified 8/16/2018 8:54 pm by Ray Borduin | 36 views | 7 replies |

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.

Sign in to reply to this post

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.

Sign in to reply to this post

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.

Sign in to reply to this post

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.

Sign in to reply to this post

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

Sign in to reply to this post

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>
Sign in to reply to this post

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

Sign in to reply to this post

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.

Sign in to reply to this post

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.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...