Manually invoke the jquery validation to show input errors - javascript

I got a form in which I'm using unobtrusive jquery validation and I just wanted to save myself the trouble of creating custom client side validation attributes for checking input file size and captcha since I'm not reusing them anywhere else.
The problem is if I do the onclick="return formValidation();" all will be fine but the captcha and file size error appear before the jquery validation since the form is not posted and is actually prevented from being posted as the function returns false. But I want all errors to be shown at the same time. So I do
function formValidation(){
$validator.showError() // put here on purpose to test if it is blocking
return checkCaptcha() && checkFileSize() == true;
}
I see that nothing can be executed after the '$validator.showError()". Since I'm not a JQuery and JavaScript enthusiast I gotta admit that I just find the $validator.showError() in an accepted answer in StackOverFlow so I'm unsure if it is actually correct. Looking for the solution.

Related

Stop form from submitting without javascript

The problem is quite simple to understand but quite hard to execute. I am currently facing some clients that turn off their browser Javascript by default and this screw up my website a bit. Since my website send ajax requests on form submit, stop the form submit using Javascript, turning JS off means the form will be sent through and that's unexpectedly.
What I am trying to ask and achieve is whether it is possible to just using html purely to stop a form from submitting?
I think the best answer is; to have the original form action point to an error page, asking the user to turn on javascript.
Then let your javascript code fill in the form action parameter, once the ajax state is complete.
Alternatively or additionally, you could use a <noscript> tag as suggested in the comments, to generate a message on the original page.
I think you can simply change your submit button tag to an input and style it to look like a button and remove the type="submit" that's all. with out ajax it will not respond.

Logging in to the Netflix website using JavaScript

I'm trying to write a wrapper for the Netflix web page in Qt using QWebEngine so that I can use my remote control to navigate. For those who didn't know, the Netflix website can't even be navigated using the arrow keys...
So, anyway, I have used QWebChannel to inject some JavaScript code into the web page, and can (visually, at least) modify the relevant elements:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByName("password")[0].value = "%2";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
This actually works (I can see the fields filled with what I provide for %1 and %2, and the button is pressed programmatically), except for one crucial issue: this results in the messages below the input forms telling me "Please enter a valid email." and "Your password must contain between 4 and 60 characters.". These tell me somehow just setting the HTML elements' values doesn't have the same effect as me manually typing in the values. Could someone help me figure out why this doesn't work, and how I can make it work? I would like to restrict myself to plain JavaScript, it seems like a simple enough task to achieve without e.g. jQuery or some other Javascript library.
I understand this is a terrible way to approach the whole Netflix-on-a-HTPC thing, but I don't want to go digging through e.g. Flix2Kodi's Python to figure out what they are doing (which seems to me is a lot more susceptible to bad breakage than the end result I'm aiming for).
The input field for the email uses some sort of HTML5 and ReactJS validation mix.
However it seems like ReactJS validation cant handle the the dynamic value change, so I tried to find a way to deactivate it, which I did not directly, but I guessed that it has to add some sort of event handler to the form so I came up with this:
var validatingForm = document.getElementsByClassName("simple-login-form")[0];
var nonValidatingForm = document.getElementsByClassName("simple-login-form")[0].cloneNode(true);
validatingForm.parentNode.replaceChild(nonValidatingForm, validatingForm);
which gets rid of all event handlers and therefore ReactJS's validation. Now you can set your value using your code:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
Note that HTML5 is still validating the inputs, so you have to provide an E-Mail Adress, if you want to get rid of that too set the input type to text before changing the value:
document.getElementsByName("email")[0].setAttribute("type", "text");
However the next page after the Button click asks for the password so you'll have to provide it there as I didn't find a way around this.
Buuuuuttt could you not have saved the password in your browser, let it do it's autofill work and fire the click event only?

Do I need JavaScript Form validation?

I'm working on some forms for a Website. Currently I have the usual HTML Browser check (with "required"-tag and patterns and stuff in the inputs), I check the values in a JavaScript before submitting and I do a server-sided check of the data after submitting.
Everything works fine, even if I have only one of them enabled, but it seems a little bit overkill to me, so my question is if I can just leave the Javascript check out? Of course I need to keep the server chek :D
Looking forward to your answers!
You must always validate input at serverside. Javascript is optional and it just to make life of your users easier. Your users get better experience. That's it.
All modern browsers support the HTML5 form field attributes. As you are using those, you may skip the JS validation.
To expand a little on the current answers:
Server side validation is always required, you mentioned that.
HTML and Javascript validation are used for different things.
The HTML required tag can be used to check a form's fields are not blank before a form submission.
Javascript validation allows you to be far more flexible with what you want to validate and when. However, it requires more work because it's not as simple as a required tag.
With Javascript you can do far more. Some examples:
Validation that occurs as soon as a user starts to type
Have the box highlight a different colour
Show an error message
Have a big red cross appear next to invalid fields or a big green one next to valid ones
Spin your page around when the user enters something invalid. (don't actually do that)
etc.
Also note browser support for the required tag.

Calling javascript on onsubmit to post users input

I'm having a really difficult time with this onsubmit. Every time I try to call my function, I get nothing. As soon as I hit 'submit', my form empties and nothing happens. It should be calling a new page to display the information that the user has entered.
I have gone through question after question on stackoverflow and can't find my answer. I'm just learning Javascript and this is probably going to be a very easy question for you all, but since I can't find anything on here that's novice level, I'm stuck referring to you guys for my 'simple' answer. I'm not sure how to submit this question without a huge block of code... so... I apologize for the lengthy code. I did only use one example from the form.
<script>
function ScheduledEvent(evtDate){
evt.evtDate = evtDate;
evt.PrintEvent = PrintEvent
}
function PrintEvent(){
document.write("<p> You have scheduled an event on " + evt.evtDate);
}
function Validate(){
with (document.evtForm){
events = new ScheduledEvent(evtDate.value);
}
with (events){
evt.PrintEvent();
}
return true;
}
</script>
<form name="evtForm" onsubmit="Validate()">
If you need to see more code I'll be happy to oblige. All of the form names and variables match. I cannot figure this out and would love your help.
Well your doing it wrong then. There are a lot of reasons behind this -
Your Validate() method is returning true, which means it will not stop the form submit. So the form will be submitted and the same page will reload. Which explains why it is getting reset. It's happening locally so you are not being able to see the page refresh.
You are calling PrintEvent() before the form is submitted. Thus document.write is actually writing the value in the document but after writing, the page is posted back and reloaded. So you cannot see the updated information.
You are using document.write, which only write on current page, so it will not take you to a different page. And remember, every time a page loads, so does the javascript, which means your javascript objects and states are lost and it is re-initialised.
When javascript writes with document.write it will not clear previously rendered items, that includes HTMLs, the form and whatever you have on that page already rendered. It will just append the line at the bottom of the body tag. To test, return false from validate and you will be able to see the item written.
If you are willing to use a new page, then you have to save the value to somewhere, either on the server or using client local storage or cookie. Try googling about how to do that.

g.nodeName is undefined

I'm converting a login/registration page to using Ajax/jQuery. As such, there is alot of common validation functionality between the two forms. One area that I'm using jQuery for is to output error messages to the user based on the input. While the forms share similar element IDs, class names differ.
So for checking the username, I have
if ($(":input").is('.registerName')){
//Username belongs to the registration form, so check if current entry is
//valid and not taken. Output error message otherwise
} else {
//username belongs to the login form, so check if current entry exists in database
//output username/password error depending on catch
}
I've experienced some strange happenings.
First, the above code returns a g.nodeName is undefined error. If I change the initial conditional to
if ($("input#username").is('.registerName'))
the same error shows up in Firebug.
However,
if ($("#username").is('.registerName'))
and
if ($("#username").hasClass('registerName))
both fail and the login validation section executes.
So how can I get the right code block to execute based on class name without a g.nodeName undefined error?
EDIT
To clarify- there are NOT two forms on the same page. The code functionality is in the javascript. I'm referring to two separate HTML forms on differing pages that call the same JS function and the only difference is the text in the error messages output.
EDIT 2
JFiddle example: Here
The text box onclear doesn't work for the fiddle, but I think you can get the gist of what I'm trying to do.
I can't reproduce the exact issue you got, but try
if ($(this).is('.registerName'))
instead. That way you'll know it's only looking at the particular element on which the keyup event occurred. $(':input') will look for all inputs on the page.

Categories