Develop Reference

How to change the language of the validity message for all the inputs using JavaScript?

I have an email and a password input with required and instead of "Please fill out this field.", I want a message in another language.
I found from relevant questions that I must use the setCustomValidity() but I don't know how to implement it correctly since the examples were using inline JavaScript or jQuery or they changed the message for one input.
While using this code:
function validate() {
const inputs = document.getElementsByTagName('input');
for (let input of inputs) {
let validityState = input.validity;
if (validityState.valueMissing) {
input.setCustomValidity('Παρακαλώ συμπλήρωσε το πεδίο.');
} else if (validityState.typeMismatch) {
input.setCustomValidity('Πρέπει να υπάρχει ένα «#»!')
} else {
input.setCustomValidity('');
}
input.reportValidity();
}
}
document.getElementsByTagName('input').innerHTML = validate();
I was able to change the language but I noticed that when I typed on the email input, the validity message would stay even if the input wasn't empty!

How do I create a tooltip showing a validation error pointing to a field when the submit button is pressed using Javascript

So I am trying to create a form with Javascript validation. I have been able to do validation for all the fields but for now, I have only shown the errors in an alert() when I submit the form.
I am wondering if there is a way to create a sort of tool-tip that point to the field and states the error that occurred during submission for each specific field.
I figured that I am supposed to save this error in a variable but I want to present it in a visually pleasing way.
Here is some of my code:
<script>
function check_name_field(){
var txtName = document.getElementById('txtName').value;
if(txtName==""){
var errName = "Please enter your full name";
//some code to show a tool-tip of the error
return false;
}
else{
return true;
}
}
</script>
<form class="newUserLogin" id="newUserLogin" method="post" action="signNewVis.php" onsubmit="return check_name_field();">
<input type="text" name="Name_user" id="txtName">
<input type="submit" value="submit">
</form>
This image is basically what I want to achieve

The least you can do is to add title value for the component as follows:-
1) Create a div with absolute position
2) Add innerHtml as the above error msg
3) set div top left as that of input control
4) display it near the control or on hover of the control
5) write script to remove once click outside
<script>
function check_name_field(){
var txtName = document.getElementById('txtName');
if(txtName.value==""){
var errName = "Please enter your full name";
//div.innerHTML = errName;
//div.top =txtName.top; div.left= txtName.left;
return false;
}
else{
return true;
}
}
</script>

You can handle it, like have the placeholder(element) to place your message in DOM. Do some CSS to style that element as tooltip. And then you can include some code to the respective error element like
<element>.style.display = "block"; // to show
<element>.style.display = "none"; // to hide
to show the element when the error occurs.
The solution above does positioning the error element and showing it on error.

jQuery script fails executing for some of the users

I am using a custom form to submit data to Google Spreadsheets. When user attempts to submit the form, it is validated (with jQuery) and if the validation is passed, the main input field is being modified with jQuery and then the submission continues.
The user inputs a URL and during submission the script cuts off unnecessary parts of the link and adds IP (that is also gathered with jQ) of the user to it. After the modification is completed, the form continues submission and in result, only the modified data is being sent to Google Spreadsheet.
It works pretty well with 99% of submissions but there are several users whose browsers do not execute the script properly; i.e.: the URL they input is not being modified during the submission and thus, wrong data (unmodified) is sent to the Spreadsheet. I am not completely sure, but the problem may be caused by Firefox (but I am not 100% sure that all the faulty submission come from Firefox, if you want I could research and confirm whether it is only Firefox's issue). I have asked some of them (users, whose browsers seem not to execute script) about addons/if they had turned JS off but they say they did not do anything special with their browsers.
I am posting whole js file below so you could check whether I did some errors that could cause problems. Also, the script is running here (link), you can inspect the code to see what other jQuery stuff I use.
$(document).ready(function() {
//Tabbiing page is being initialised, doesn't really matter, I think
$.ionTabs("#fppp_taby");
//Script that checks whether user has been redirected back after submission, that's not the main problematic part yet
if (window.location.search != 0) {
var query = window.location.search.substring(1);
ideo = query.split("=")[1];
if (isNaN(ideo) || (ideo.length < 3) || (ideo.length > 10)) {
$("form").html("Wystąpił błąd podczas wysyłania Twojego zgłoszenia. Powiadom mnie o tym poprzez prywatną wiadomość podając również obecną godzinę za pomocą <a class='uline' href='http://www.erepublik.com/pl/main/messages-compose/2417512'>tego linka</a>.");
} else {
$("form").html("Dziękujemy za zgłoszenie!<br /><br />Możesz teraz przeczytać któryś z artykułów epolskiej prasy - lista wartch uwagi znajduje się po lewej stronie!");
var poZglosz = "Dziękujemy za zgłoszenie!<br />Spodziewaj się chlebków i broni od któregoś z tych graczy: Kijek93, twatwaratwa, Gregoric bądź Zawa99";
$("#poZglos").html(poZglosz);
$("#poZglos").removeClass();
}
} else {
var query = 0;
}
//Some simple stuff
$("#wlaczirc").click(function() {
$(this).hide();
$("#irc").html("<iframe src='http://webchat.quakenet.org/?channels=fppp&uio=OT10cnVlJjExPTM0OQ1f'></iframe>");
$("#irc").show("slow");
$("#info_irc").show("slow");
});
//Some data
infoPodkr = "Wklej tutaj prawidłowy link do twojego profilu!";
inputLink = $("#ffpolelinku");
//Resetting validation info in input
$(inputLink).focus(function() {
if ($(this).hasClass("podkresl") || $(this).val() == infoPodkr) {
$(this).val("");
$(this).removeClass("podkresl");
}
});
//Gathering ip
$.getJSON("http://jsonip.com/",
function(data) {
ip = data.ip;
});
//MAIN PART (executed when user pressses 'submit')
$("form").submit(function() {
//Form is being hidden (display:none class is being added)
$('aside').addClass("hidden");
//Check whether input is empty or contains error message (infoPodkr = error message vlaue), if yes, add class 'podkresl'
if (($(inputLink).val() == "") || ($(inputLink).val() == infoPodkr)) {
$(inputLink).addClass("podkresl");
$(inputLink).val(infoPodkr);
} else {
$(inputLink).removeClass("podkresl");
}
//Tesing whether user added proper link, if not, 'podkresl' is added
//if (!/\b(https?|ftp|file):\/\/[\-A-Za-z0-9+&##\/%?=~_|!:,.;]*[\-A-Za-z0-9+&##\/%=~_|]/.test(inputLink.val())){
if (!/http\:\/\/www\.erepublik\.com\/[a-z]{2}\/citizen\/profile\/\d{5,}$/i.test(inputLink.val())) {
$(inputLink).addClass("podkresl");
$(inputLink).val(infoPodkr);
}
//Split link, and get the last part of it ('wycId'), check if it's numeral, if not - add 'podkresl' class
podzielony = $(inputLink).val().split('/');
wycId = podzielony.pop();
if (isNaN(wycId)) {
$(inputLink).addClass("podkresl");
$(inputLink).val(infoPodkr);
}
//Check whether the input class 'podkresl' class (= something was wrong in some of the steps above). If yes, remove the 'hidden' class from 'aside' which holds the form and show it to the user. If there were no errors, add the IP to the 'wycId' and additional "-n" to the end of the value and put it into input. Then, submit form.
if ($(inputLink).hasClass("podkresl")) {
$('aside').removeClass();
return false;
} else {
if (ip !== '') {
$(inputLink).val(wycId + "-" + ip + "-n");
} else {
$(inputLink).val(wycId + "-0-n");
}
}
return true;
});
});

Dynamics CRM forms: jScript for a dummy

Breaking my head against more compex problems, I try to get back to basics.
I want to have a jScript in a form, that upon user change in control Sub-Fund, will pop up a message showing the new value of that control.
Here is my code -- which returns an error, of course 8-(((
function TestForDummy()
{
var noind = crmForm.all.new_subfundid.DataValue;
alert(noind);
}
Whenever I update Sub-Fund, it gives me an error
Field:new_subfundid, Event:onchange, Error:Object expected
What'wrong ?

Try this :
function TestForDummy()
{
var lookupValue = Xrm.Page.getAttribute("new_subfundid").getValue();
var noind = lookupValue[0].id;
alert(noind);
}

How to escape an entity within jQuery function using jAlert?

Here's sample code:
$("#register-button").click(function(){
if (uname=="" || pname=="" || cemail=="" || remail=="") {
jAlert('Please fix the validation error','Title™');
return false;
}
});
Basically, if username, password, or email fields aren't filled correctly, a jAlert pops up that says "Please fix the validation error" containing a title that's trademarked. Unfortunately, this trademark is not properly an entity and does not render correctly.
I tried the following but it does not work correctly:
$("#register-button").click(function(){
if (uname=="" || pname=="" || cemail=="" || remail=="") {
jAlert('Please fix the validation error','Title™');
return false;
}
});
As you can see, the only difference is that I've included ™. However, it does not turn into ™ when the jAlert pops up.
How do I escape the jQuery in order for this entity to properly render?

Just define this on function level in your code:
String.prototype.htmlEscape = function () {
return this.replace(/&/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">");
}
And now you can use it as:
jAlert("Please fix the validation error".htmlEscape(),"Title™".htmlEscape());