I have an email validation code on client side. It works fine/as expected in IE but somehow doesnot show error messages in Firefox.
Below is the code:
<asp:ImageButton ID="btnLink" runat="server" AlternateText="ClickHere" OnClientClick="return onCClick();" OnClick="btnLink_Click"/>
<div id="errorEmail" runat="server"></div>
//function to validate
function onCClick() {
//clear error message
document.getElementById('<%=errorEmail.ClientID%>').innerText = "";
//if validation fails
if (validateEmail() != true) {
//show error message
document.getElementById('<%=errorEmail.ClientID%>').innerText = "Invalid Email Address.";
return false;
}
}
function validateEmail() {
var emailId = document.getElementById('<%=txtEmail.ClientID%>').value;
var emailPattern = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
return emailPattern.test(emailId);
}
Is there something which i should have taken care of ? My error message div is set to blank but not invisible anywhere(in that case javascript also would not have worked)
innerText is not cross browser, firefox uses textContent
You can use a function like this:
function changeText(elem, changeVal) {
if ((elem.textContent) && (typeof (elem.textContent) != "undefined")) {
elem.textContent = changeVal;
} else {
elem.innerText = changeVal;
}
}
or just use innerHTML.
Better you try innerHTML.. it will work..
document.getElementById('errorEmailAddress').innerHTML = "Error Message";
Related
I have a function in javascript linked to a form that check cookies and log in, so when it does all the checks and everithing is ok it shows a confirm popup and if the user clicks in ok it should link to another internal page but it doesn´t, I mean, it shows the confirm popup but it doesn´t redirect.
I have tried window.location.href and window.location.replace but nothing works.
function checkCookies() {
var emailValue = document.getElementById("nombre").value;
var passValue = document.getElementById("pass1").value;
var correct_email = checkCookie("email", emailValue);
var correct_pass = checkCookie("pass", passValue);
if (correct_email == -1) {
alert("Password or email are wrong")
} else if (correct_pass == -1) {
alert("Password or email are wrong")
} else if (correct_pass === correct_email) {
alert("Log in succesfully")
window.location.href = "principal.html";
} else {
alert("Password or email are wrong")
}
}
If you see
Log in succesfully
On the screen and then nothing happens, try to replace this line:
window.location.href = "principal.html";
with
location.assign("/principal.html");
I assume that /principal.html is in the same directory we're currently in while checking cookies or in the root.
Try
document.location.replace("principal.html").
also, what error are you getting?
could you please help me to allow the asyncFileUploader to use these extensions:(rar,pdf,doc,docx,zip)...
im not an jscript expert, so i have been tying to edit the script by my self but i failed ...
var fileExtension = args.get_fileName();
if (fileExtension.indexOf('.doc') != -1) {
$get("dvFileErrorInfo").style.display = 'block';
$get("<%=lblError.ClientID%>").innerHTML = "File extension [.doc] not supported";
$get("dvFileInfo").style.display = 'none';
return;
}
Change the condition to fileExtension.indexOf('.doc') == -1 && fileExtension.indexOf('.pdf') == -1 && etc so on. Copy paste the condition and add the extensions you wanna allow. This would mean that any extensions not in the conditions will fullfil the condition and the message will display
You can use the OnClientUploadStart property on the control to fire a JavaScript function for validation, like this:
<cc1:AsyncFileUpload ID="FileUpload" runat="server"
OnClientUploadStarted="AssemblyFileUpload_Started" />
Then use this script on your page:
<script>
function AssemblyFileUpload_Started(sender, args) {
var filename = args.get_fileName();
var ext = filename.substring(filename.lastIndexOf(".") + 1);
if (ext != 'zip') {
throw {
name: "Invalid File Type",
level: "Error",
message: "Invalid File Type (Only .zip)",
htmlMessage: "Invalid File Type (Only .zip)"
}
return false;
}
return true;
}
</script>
Use other file types as well.
I have two javascript files that I am using to validate an email address.
validate.js:
function checkEmail(userEmail) {
var email = userEmail
var emailFilter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (emailFilter.test(email.value)) {
//alert('Please provide a valid email address');
//email.focus;
return true;
}
else{
return false
}
}
navigation.js EDIT:
$(document).ready(function() {
//ADDED IMPORTS
var imported = document.createElement('script');
imported.src = 'lib/validation.js';
document.head.appendChild(imported);
console.log("DOCUMENT IS READY!");
var viewsWrapper = $("#views-wrapper");
var loginButton = $("#login-button");
var registerButton = $("#register-button");
// Login Link
// TODO: Unclear if needed
$("ul li.login").click(function() {
$.get('/login', function(data) {
viewsWrapper.html(data);
});
});
$('#usernamefield').blur(function() {
var sEmail = $('#usernamefield').val();
if ($.trim(sEmail).length == 0) {
alert('Please enter valid email address');
e.preventDefault();
}
if (checkEmail(sEmail)) {
alert('Email is valid');
}
else {
alert('Invalid Email Address');
e.preventDefault();
}
});
...(more code follows but not relevant)
I am also using this jade template:
login.jade:
form(action="")
key EMAIL
input(type="text", name="username", id="usernamefield")
p hello world
br
key PASSWORD
input(type="text", name="password", id="passwordfield")
p hello world
br
input(type="submit", name="loginButton", id="login-button", value="LOGIN")
My issue is that when I input something into my email field, I do not get an alert message in any case. Am I allowed to just have to separate javascript files and call the methods I defined in validate.js within navigation.js? I tried putting the validate.js code in navigation.js, but even then it did not work. I would like to keep the files separate. Am I missing something obvious? I want it so that once the user inputs the email, and leaves the field, a message should appear warning if the email is valid or not.
Your help is appreciated.
Is it the blur Event or the checkEmail the problem? try to put a alert() or console.log() just after your blur (and make sure to lose focus on your input). Seperate file shouldn't be a problem. And also have you check for errors in your console ?
JavaScript string has no "value" field
After
var sEmail = $('#username').val();
sEmail becomes a string.
You are passing this string to checkEmail method and try to get "value" from a string:
if(!emailFilter.test(email.value)) {//...}
Replace to
if (!emailFilter.test(email)) {//...}
You are already sending the value of email into checkemail function. So in checkEmail function in validate.js remove email.value in second line of function checkEmail
function checkEmail(userEmail) {
var email = userEmail
var emailFilter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
//alert('Please provide a valid email address');
email.focus;
return false;
}
}
I have some JavaScript form validation I'm using before I send it across to my PHP. (I'm still learning). but my question for you today is how I would get my error message to shake without reloading the page. My below JS code seems to reload the page when I click submit. The error message style is set to disply:none; by default and only shows when needed.
I hope you understand what I am getting at. ha ha Thank you in advance.
Here's the js code.
function validateLoginForm() {
var x = document.getElementById('email').value;
if (x == null || x == "" || x == "Email") {
document.getElementById('errorWrapper').style.display='block';
document.getElementById('errorText').innerHTML='Please enter your Email address!';
shakeIt();
return false;
}
}
and the jQuery.
$(document).ready(function() {
function shakeIt(){
$('#errorWrapper').effect("shake", { times:5, distance:8 }, 50);
}
});
You need to do it on form.submit ie
$('#loginForm').submit(function(e){
var x= $('#email').val();
if (x==null || x=="" || x=="Email")
{
$('#errorWrapper').show();
$('#errorText').text('Please enter your Email address!');
e.preventDefault();
shakeIt();
}
return true;
});
Returning false will make the page not reload..
I have this JS which gets a XML response from a service, its a True or a False, well the script should catch the submit and get the response from the service.
The problem is that I see that its not working because when I do the submit, I see the XML response on IE (6/7/8), when the script should have catched it and validated the XML response.
<div id="eventForm" style="display:none;">
Event.observe('formDataPersonal', 'submit', function(event) {
$('formDataPersonal').request({
onSuccess: function(t) {
var xml = t.responseXML.documentElement;
var stateNode = '';
var msgNode = '';
if (navigator.appName == "Microsoft Internet Explorer"){
stateNode = xml.childNodes[0].nodeValue.toLowerCase();
msgNode = xml.childNodes[1].nodeValue;
}else{
stateNode = xml.childNodes[0].textContent.toLowerCase();
msgNode = xml.childNodes[1].textContent;
}
if (stateNode == 'true'){
$('transparentDiv').style.display='none';
$('popup').style.display='none';
validateIntegrationPopup();
}else{
var error = msgNode;
if (error != ''){
$('interfase').innerHTML = error;
}
}
}
})
});
</div>
I would be grateful for the help.
I think the problem may be that 'IE' does not see the submit event so it ends up just submitting the form normally:
See: https://rails.lighthouseapp.com/projects/8994/tickets/4411-railsjs-on-bodyobservesubmit-but-submit-doesnt-bubble-in-ie
This is an old question, but I managed to get it as my second result in a Google search, so:
You're not stopping the submit event from going through to the browser, which is why the form is submitting even though the event handler attached to it. Add in an event.stop():
<div id="eventForm" style="display:none;">
Event.observe('formDataPersonal', 'submit', function(event) {
event.stop();
$('formDataPersonal').request({
// .... code ....
});
});
</div>