I got my form in a wordpress website: https://www.dravaliani.com/250botox/ which on desktop if you don't fill all the fields then a warning message is displayed so that user don't let them empty.
But If I see the same form but on a mobile device (a phone), if you leave the fields empty the warning message do not appear. And the same thing happens for Tablets.
The form is create with GravityForm ALTHOUGH it's not its fault because I have create another page and the form works perfectly. So I guess the ajax it's not loading on mobile devices.
any ideas?
it's not ajax you have duplicate form in your html output gform_fields_1 that's why you are not seeing the validation results.
The first one form is hidden using css :
#media screen and (max-width: 640px) .fusion-no-small-visibility
{ display: none !important;
}
The validation script which adding the error massage most probably using querySelector to select the form and appending the error massages, if you change above css code to display the first form you will see the validation error is already there.
Related
I am using Valdr module to validate my form, it is working very well and validates the control content when i press tab, however I wanted to validate the control content while typing (keypress).
Your help is highly appreciated.
valdr is implemented as AngularJS validator. This means the validation happens by default on keypress when the ngModel is updated.
It is possible that you changed this behaviour in your app by configuring ngModelOptions to update the model on blur.
If this is not the case, you most likely have to change your CSS. This is how it is intended to control the visibility of validation messages.
The following CSS would show the valdr messages as soon as the user starts typing in the field:
.valdr-message {
display: none;
}
.valdr-message.ng-invalid.ng-dirty {
display: block;
}
I am creating a mobile site using Kendoui mobile and using KendoValidation.
The problem is that by default the error messages block the input area's due to the small display area.
One thought I have is to just change the color of the prompt to red when a input is invalid and, if needed, a tooltip that will display when the input as focus.
Is there a way to stop the messages and get perform this action?
Thanks, George
I found my own solution:
Instantiated the validator using:
var validator=$('#mt-New-Reservation').kendoValidator({ errorTemplate: "" }).data('kendoValidator');
and added the following css:
.k-invalid {background-color: lightpink !important;}
The errorTemplate: "" causes the error message to not display.
The validator adds a class k-invalid to any item that is not valid, so the css changes the background color of the input area.
For my application, most of the inputs as self-explanatory and do not need a detailed message (most of the time the 'required' rule is what's making it invalid). So just changing the background color draws the used's attention to the item that needs to be fixed.
-George
I implemented Recaptcha to Silverstripe and it seems to work.
The only problem is that the formular and the captcha code are at the very end of the page and if you type in a wrong code then the page reloads and jumps back to the top so that the user doesn´t see the formular and captcha code anymore.
how can i make the window not to scroll to the top after entering a wrong captcha code?
Since the HTTP spec doesn't allow to a serverside redirection including an anchor tag, you'll need to use JavaScript to accomplish this. Since the field is highlighted with a validation message in the standard SilverStripe form rendering, you can use this to determine the state of the field once the submitted form loads again.
jQuery(document).ready(function() {
var captchaEl = jQuery('#MyCaptcha');
if(captchaEl.find('.message.required').length) {
window.scrollTo(0, captchaEl.scrollTop());
}
});
The Like button plugin doesn't appear, if one of its containers is display:none when the page loads, and made visible later with display:block.
Problem detected in Firefox (my version 15.0.1) only.
What can I do?
when you make the element visible, you should add your fb like plugin to dom
IE
<div id="showfb">mouseoverme</div>
<div style="display:none" id="facebutton"></div>
<script>
var fbbutton = document.getElementById("facebutton");
document.getElementById("showfb").onmouseover = function(){
// first visible
fbbutton.style.display='block';
// then add fb html5
fbbutton.innerHTML = '<div class="fb-like" ......... ></div>';
};
</script>
in alternative, try
width:0;height:0;overflow:hidden
instead of
display:none
and
width:auto;height:auto;overflow:visible
instead of
display:block
I don't know what is the reason of this bug (FB or FF), but I've solve that problem by show my element by default in FF only:
#-moz-document url-prefix() {#exe-article-social-tools { display: block; }}
https://developers.facebook.com/docs/reference/javascript/
The fb-root tag
The JavaScript SDK requires the fb-root element to be present in the page.
The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.
It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.
I had a number of different invisible divs on my page where fb-like buttons was hidden. When one of div shown, no fb-like button appears in it. Solution worked for me is to relaunch FB.init manually each time when invisible div reveals.
FB is a global function being added into your window object since you call for remote facebook api by url like http://connect.facebook.net/en_US/all.js. So since this remote script attached to your DOM you can run something like
FB.init({
appId : '346094915460000', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
You can dynamically add like button html5 code to the DOM and then run the FB parser again to generate the like button:
fbbutton.innerHTML = '<div class="fb-like" ... ></div>';
FB.XFBML.parse();
Here is the ajax call:
function loadContent( url ) {
jQuery.ajax({
url: url,
success: function(data)
{
// set content
jQuery("#overlayDiv").html(data);
// hide loading spinner
jQuery("#overlayCleared").hide();
}
});
}
It works fine in all the other browsers except IE, in which the div remains empty.. :(
The css I'm using is:
div#overlayDiv {
overflow: auto;
position: relative;
height: 95%;
}
div.video_overlay { /* this class will be added to the div using jQuery */
padding-left: 0px;
width: inherit;
top: 35px;
}
What can I do about it?
Many thanks
Actually, there's also the possibility that you ran into the IE Ajax caching problem, where IE tends to cache results from GET requests. See http://ajaxian.com/archives/ajax-ie-caching-issue.
Solution is to use POST (Note: jquery defaults to GET)
i ran into the same issue a couple of days ago and i simply made this change and it fixed the problem.
(*Considering the url points to localhost)
ensure that your url points to 127.0.0.1 when testing on ie e.g;
use ------> http://127.0.0.1/
instead of ----> http://localhost/
I just solved this very same issue for a big HTML5 application that required IE8 compatibility. The HTML returned by the Ajax calls is quite complex and includes SCRIPT tags with lots of JQuery and standalone JavaScript code.
Apart from the well known IE caching problem (and some others), the key of this kind of issue resides on IE being extremely picky at the time of letting dinamic HTML content be loaded into any element, in my case it was a DIV. Not only is IE picky but shows a sort of random behaviour like rendering a part of the returned HTML or nothing at all without any apparent relationship between the partially rendered HTML and the finally discovered coding issue.
On top of that it throws no HTML coding errors at all making it a real nigthmare to debug this kind of scenarios. In my case I had no choice but recurring to the 90's debugging techniques. I took the returned HTML code from Chrome by copying the node code in the inspection view of this browser, put it into a flat .html file and used this server side code to read the code from the flat file.
$myfile = fopen("flatfile.html", "r") or die("Unable to open the file");
echo fread($myfile,filesize("flatfile.html"));
fclose($myfile);
From then on use the returned code and input it into the container object, start by dividing it into two (letting each part be a coherent piece of code on its own), see what part of the two is rendered and what not and so on with each part until you find the offending piece of code.
One important thing to note is IE8 will work no matter how complex de mix of HTML and Javascript is, you just have to painfully debug your code. If I say so it is becouse you will find many posts stating that IE7,8 cannot handle complex Ajax returned code or that JQuery's .html() property won't work in such cases. It's not true, take your time and you'll find where your issue is, do not give up.