Set error message when user forgets to upload image. i have not found anything most of the errors are uploading errors i want one that lets the user know that they forgot to upload image also i don't want to let the user go tho the next page until the image is uploaded. i have tried using my old code for forgot first and last name but that doesn't seem to work. that is just an example to show you what i use for errors please help
function formValidator() {
var names = document.getElementById('names');
if (isAlphanumeric(names, "Please enter first and last name")) {
<input type="file" name="file3" id="file3" />
I think you're over-engineering a bit here. You can actually rely on attributes of input in HTML5 that can validate or invalidate form submission for you. For example, denoting an input as required and using formvalidate can trigger this automatically.
<form action="" method="post" id="myform">
<input type="file" name="file3" id="file3" required formvalidate>
<input type="submit" novalidate>
</form>
The browser will insure the input is supplied before allowing the submission. You can also hook into the form's onsubmit handler via javascript if you need to do further validation...
var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
Related
I have the following form as part of my webpage:
<form id="collabAccess" onsubmit="submitCollabForm()" >
<div id="row-1">
<div class="two-col" id="email"><input type="text" placeholder="Enter email addresses separated by commas"/></div>
<div id="collabSelect" class="collab two-col styled-select">
<select id="collabaccess">
<option>Can Read</option>
<option>Can Write</option>
<option>Can Read & Write </option>
<option>Administrator </option>
</select>
</div>
</div>
<div id="message">
<textarea id="personalMessage" cols="154" rows="10" placeholder="Optional: include a personal message"></textarea>
</div>
<div id="submit-wrapper"><input type="submit" value="Add Collaborators" id="addCollaborators" disabled='disabled' class="small-btn disabled"/></div>
</form>
The function submitCollabForm() is as follows:
function submitCollabForm() {
console.log('in submitCollabForm');
var valid = validateEmails();
if (valid == false) {
var email = document.getElementById('email');
email.addClass('error');
}
}
where validateEmails() is just another js function for validating that the email addresses int he form have the correct format.
However, it looks like onsubmit is not being called at all. Even if I change things to onsubmit="console.log('xyz'), no console statement is being output. I've also checked for javascript errors in the console, but I am getting nothing.
Is there any reason why onsubmit is not working properly?
Your validation function needs to return false to stop the form from submitting. It's better to have
onsubmit="return submitCollabForm()"
See With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"? for details.
The onsubmit handler is not called, because the form cannot be submitted by any normal means, i.e. the submit event cannot be caused. There is only one submit control, and it is declared as disabled.
if you feel all code is correct still it's not working then,
Simple steps to do,
1) create one script tag in the same page where your form is, create one function and set one alert and test it. If it is working then try following steps.
2) Try to check the path of your javascript file.
3) if path is correct, then change the name of your javascript function sometimes your name tag conflicts with your function name, and submit points to it, so your call is not reaching at your function. It happened with me. so I posted it here, hope it will be helpful to someone.
I am creating a page that is only javascript and html. I have 2 problems.
When it calls the function inputs() in this form, it fails at the first time and success on the next submissions.
<div id="container">
<form onsubmit="inputs()" action="#">
Variables: <input type="number" id="vars" size="1" required/>
Constraints: <input type="number" id="cons" size="1" required/>
<input type="submit" value="Submit">
</form>
</div>
I wasnt able to solve this but I skipped it because it still proceeds to the inputs() the next submissions.
But in my inputs(), i created a form dynamically. The form is created as this:
var form = document.createElement("form");
form.setAttribute("action","#");
form.setAttribute("onsubmit","solve()");
Now, when I submit the dynamically created form, the problem is it goes back to the first set of form. solve() was not called.
Why is it? What should be edited?
Thanks for the help in advance.
solve() has these lines of codes. It's just a test if it will successfully go into it but it fails. This just deletes all the elements.
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
This line
form.setAttribute("onsubmit","solve()");
isn't doing what you think it does. If it was in the actual html it would work but not now. What it does is just make the attribute appear in the console. The event handler isn't actually being set.
Instead do it via onsubmit property or addEventListener
form.onsubmit = solve; // now it must work
Try return false at the end of the function solve. this should work to show but would not perform action. Also add "return solve()" instead of "solve()".
I do not want to perform a submit action when pressing the "submit" button on my form but rather perform some data manipulation and then submit the form using javascript form.submit - as such I do not use the <input type="submit"> element in my form:
<form action="process.php" method="post" name="myForm">
<input type="text" name="entry" id="entry" required />
<input type="button" value="Submit" onclick="manipulate_and_submit(this.form, this.form.entry);" />
</form>
With the script being something like:
function manipulate_and_submit(form, entry) {
var val = entry.value;
var hidden = document.createElement("input");
form.appendChild(hidden);
hidden.type = "hidden";
hidden.name = "m";
hidden.value = generate_other_value(val);
entry.value = "";
form.submit();
}
But before submitting I want to validate the entry and other elements of the form - I can do that manually ofc. but HTML5 gives us the required and so many other attributes - how can I simply integrate them? Is there something like form.isValid() ? Googling "validate javascript html form" just gives me examples that deal with the manual validation in javascript from "ye olde times" ...
You can use checkValidity, which is a method provided by HTMLFormElement. In your example, it would be something like if ( !form.checkValidity() ) { code here }. From MDN:
[checkValidity] Returns true if all controls that are subject to constraint validation satisfy their constraints, or false if some controls do not satisfy their constraints. Fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled.
Source
As that says, it also fires an invalid event at every invalid form item. Then you can just make your own handler to show invalidity, like something described in this answer.
I have a simple form with phone inputs and some email inputs, however I cannot get rid of the default browser warning messages that come up when I click the submit button.
My CodePen
I've tried to implement event.preventDefault(); however it doesn't seem to work in my case.
$('#profile-info-form').unbind('submit').bind("submit", function(event) {
event.preventDefault();
console.log('save button clicked');
});
Example of the input fields I create on the fly:
var myphone = "<li><label>Cell Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' /></li>";
How would you handle this problem?
If you want to disable client side validation for a form add a novalidate attribute to the form element. Fx:
<form method="post" action="" id="profile-info-form" novalidate>
// Your script Here
</form>
See http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate
Remove the pattern attribute? Just using the tel type should still get you the keypad interface on mobile and without pattern the native validation/formatting should not run.
I have following problem. I have input field in form, type of file:
<FORM action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
I am setting using JavaScript also files property of this input and I want this input on submit of form send the file property instead of his value. Is it possible to do so?
var data = e.dataTransfer;
var input = dojo.byId(inputName);
var file = data.files[i];
input.files[0] = file;
data is a datatransfer object, I am getting files from there.
I know, it will be possible only in few browsers, I dont care. I just need to get it working at least in FF.
So if I understand you correctly you drop some files and you want to populate a file input object
I see a drop example here http://help.dottoro.com/ljslrhdh.php
but to populate the file field you will need a pretty heavy privilege change using a signed script - UniversalFileRead is probably the one you need