We Keep Coding

How to recheck required input fields in JavaScript/HTML5

I'm trying to stay away from JQuery for this one (nothing against JQuery, I just don't want to load a huge library into this project for something small like this).
I'm curious how I might tell HTML5 to recheck all the required input fields in a given form. For example, I have this form (albeit slightly more complicated but you get the point):
<form action="here" onsubmit="check()">
<input required name="something">
<input type="submit">
</form>
If I don't have anything in that required field, HTML5 shows a popup error, something to the effect of "Please fill in this required field". What is stopping the user from putting in a single space, or some nonsense character like % or >? I'd like to partially validate this client-side (in addition to server side) so it isn't particularly inconvenient when the page redirects to the form submission page and then shows the error, and then goes back to the form, prompting the user to enter everything over again.
Assuming in my onsubmit function check I've removed all whitespace and/or nonsense characters from the ends of the string, how can that function then tell HTML5 to recheck the form to see if the required fields are still not empty?

Instead of onsubmit="check()" use addEventListener.
Now you can do everything with input data.
document.getElementById("submit").addEventListener("click", function(event){
var something = document.getElementById("something").value;
document.getElementById("something").value = something.replace(/[^A-Z0-9]/ig, "");
});
<form action="here">
<input required name="something" id="something">
<input type="submit" id="submit">
</form>

try to use regexp pattern (e.g. exclude white chars: [^\s]*, allow only letters [A-Za-z]*, ...)
<form action="here" onsubmit="check()">
<input required pattern="[^\s]*" name="something" >
<input type="submit">
</form>

How to reference an html document with a form to another html document to create a table out of that?

I need a little bit of help. I'm stuck at making the form information I have on my first html document show up on the tables in the second html document.
Any help would really feel good right now.

I'm not sure exactly what your question means, but if you are asking about including an html inside another html, check this link: include html in another html
Edit:
If you have no option to use server-side programming, you could use the query string.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="name" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the name, phone value as a parameter. like:
http://www.example.com/display.html?name=XYZ&phone=98745654
You should then be able to parse the query string - which will contain the parameters value - from JavaScript, using the window.location.search value:
// from display.html
<p id= 'hi' ></p>
<script>
document.getElementById("hi").innerHTML = window.location.search;
</script>
this should help you to start what you are trying to do.

Validation and form action dont work together

I have a form with validation on data (E.g the mobile number must contain 10 numbers and numeric) . once everything submitted i've pressed submit button then those data must send to the data base over the php file (access from from action=file.php)
im not sure if i type this form part correctly or not
please help
<form action="patientdetails.php" method="POST" name='registration' onSubmit="return formValidation()"/>
<input type="image" src="Images/submit.png" alt="Submit" name="submit" value="Submit" />

You can use code like this for form validation :
`<script>` <br>
`function formValidation(){`<br>
`var myform=document.registration;`<br>
`var num=myform.mobilenum.value;`<br>
`if(num<10){`<br>
`alert("invalid number");`<br>
`return false;`<br>
`}`<br>
`else{`<br>
`return true;`<br>
`}`<br>
`}`
`</script>`
`<form action="patientdetails.php" method="POST" name='registration' onSubmit="return formValidation()"/>`<br>
`<input type="number" name="mobilenum" />`<br>
`<input type="submit" name="submit" value="Submit" />`

Nothing in your form code will cause a problem with validating your input.
Not having any <input> elements does make it impossible for anyone to type the mobile number though.
There are some things which are wrong, out of date, or low quality…
There is no name attribute for form elements
Intrinsic event attributes like onsubmit are better replaced by JavaScript that uses addEventListener
Image type inputs are designed to provide server side image maps, if you just want a graphic to be your submit button you should probably have <button><img></button> instead
… but none would cause the problem you are describing.

append required input into existing form

I've got a small-big problem with ajax. Let's describe the situation:
I've got a form with submit=javascript:function()
function will call AJAX with some values, and on success I want to append some content with 'required' input to existing form.
I was trying many things, most from: How to set HTML5 required attribute in Javascript? , but still cannot reach it.
example code:
<form id="myFormID" action="javascript:mycustomsubmit()">
<input type="text" id="add" style="margin:2px;" required>
<input type="submit" name="add" value="Add" class="btn btn-primary">
<textarea rows="5" id="custom_add"></textarea>
(...) on ajax success clear form values and insert new required input:
$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');
so after this my html code looks like this:
<form id="myFormID" action="javascript:mycustomsubmit()">
<input type="text" id="add" style="margin:2px;" required>
<input name="anotherinput" type="text" required="">
<input type="submit" name="add" value="Add" class="btn btn-primary">
<textarea rows="5" id="custom_add"></textarea>
</form>
And in fact it is (with this difference, that new input has required=""), but this new input is not required at all - I can send form even if this input is empty. I was trying to do it by append required, required="required", required=true, required="true", by append just input and then jQuery .prop or/and .attr, by JS examples from link - but it is still not working.
2nd question: After ajax append content and clear values I've got red border around required input field - is there any simple way to remove it (but to show this border and info if user will try to send form with this input empty) in FF,Chrome,IE ?
First post here...
Thanks in advance for any advices!
edit:
what is interesting: when I've submitted my form few times (so I've got few input fields) and I executed $("input").attr('required',true).prop('required', false); then obviously form haven't got any required inputs. However when I've executed it with prop "true" then only original input is really required, all added by append still can be empty...

This is a question consisting of multiple questions. So I'll try to identify and answer them separately.
How to append a new input field after your input field with ID "add" on submitting the form?
Try this instead (your selector was wrong):
$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');
How do I get rid of the red border?
I suggest that you use jQuery to handle the form submit (not tested):
$('#myFormID').submit(function(e) {
// Checking if all required fields are filled out.
if (!e.target.checkValidity()) {
// TODO: Not all required fields are filled out. Do something e.g. adding your new input field?
// Preventing form submit to continue. I think this should prevent the red border. Not tested though...
e.preventDefault();
}
else {
// Everything is OK. Do whatever is needed.
}
});
I'm not sure if I got your questions, but I hope it helps.

Try this,
$("input").attr('required',true);
or
$("#name_add").attr('required',true);

Send enter from javascript

How to send enter from javascript to site?
What I real need is to send text to site like filehippo.com in search box, and press enter to search for those text.
So piece of code from site is:
<div id="searchbox">
<form name="f" action="/search">
<input style="color: #999" type="text" id="q" name="q" maxlength="150" value="Search..." onfocus="javascript:clearInputValue('q', 'Search...')" onblur="javascript:setDefaultIfEmpty('q', 'Search...')">
<input type="submit" id="search-submit" value="GO" onclick="javascript:submitQuery('q', 'Search...')">
</form></div>
And my simple code look like this:
javascript: document.getElementById('q').focus();document.getElementById('q').value='Winrar';document.getElementById('f').item(0).click();
And those script just put focus on search box and send text to them, but I need also to do automatically search (send enter), how to do that?
document.getElementById('f').item(0).click(); -> dont work
What I need is to simulate click of mouse, by enter, cause can't send click to element that work properly.
Is it possible to send enter with text?

Use document.f.submit(); to submit the form.
The problem is that there are multiple forms named 'f'
javascript:document.f[0].submit();
So the fully functional line would be:
javascript:document.getElementById('q').value='Winrar';document.f[0].submit();

Use onkeypress attribute of input element.