Develop Reference

Validate form fields with javascript

folks.
I hope you don't see this as a silly question because i am new to JavaScript. I did my research on how to solve this problem but the answers i found on stack overflow were kind of too high for me right now. And i don't like to copy codes either. I want to learn it. My JavaScript code worked on one field but didn't work for all fields even when i did a loop.
Please you are free to show me how to do this professionally. I would be grateful to see many approaches or methods. Gracias
function Validate(x){
var required = document.getElementsByClassName("required");
for(var x = 0; x > required.length; x++){
if ((required[x].value == "") || (required[x].value == null)) {
required[x].style.backgroundColor = "red";
required[x].style.color = "white";
} else {
required[x].style.backgroundColor = "";
required[x].style.color = "#777";
}
}
}
<form id="form1" name="form1" method="post" action="">
<p>
<label for="textfield">Name</label><br />
<input type="text" name="name" id="name" class="forme required" onblur="Validate(name)" />
<br />
<label for="textfield">Surname</label><br />
<input type="text" name="surname" id="surname" class="forme required" />
<br />
<label for="textfield"> School</label><br />
<input type="text" name="school" id="school" class="forme required" />
<br />
<label for="textfield">Mobile</label><br />
<input type="text" name="mobile" id="mobile" class="forme required" />
<br />
<label for="email"> Email</label><br />
<input type="text" name="email" id="email" class="forme required"/>
</p>
<p>
<input type="reset" name="reset" id="reset" value="Reset" />
<input type="submit" onclick="Validate()" name="submit" id="submit" value="Submit" />
</p>
</form>
Be grateful for ya time.

as mentioned in the comments of your question, you used the wrong sign (">" ist false, "<" is true). But your code has some more failures.
The for attribute on the label elements should always point to the respective input field, so use the ID of the input field.
It's may better to use the JavaScript addEventListener method instead of the DHTML attribute onclick, but that is probably a matter of taste.
document.getElementById("submit").addEventListener("click", function(event){
var req = document.querySelectorAll("form input.required"),
error = false;
for(var i = 0; i < req.length; i++){
if(req[i].value.trim() == ""){
if(!error){
error = true;
}
req[i].style.setProperty("color", "#ffffff");
req[i].style.setProperty("background-color", "#ff0000");
} else {
req[i].style.removeProperty("color");
req[i].style.removeProperty("background-color");
}
}
if(error){
// Prevent Form Submit
event.preventDefault();
}
});
<form id="form1" name="form1" method="post" action="">
<p>
<label for="name">Name</label><br />
<input type="text" id="name" name="name" class="forme required" />
</p>
<p>
<label for="surname">Surame</label><br />
<input type="text" id="surname" name="surname" class="forme required" />
</p>
<p>
<label for="school"> School</label><br />
<input type="text" id="school" name="school" class="forme required" />
</p>
<p>
<label for="mobile">Mobile</label><br />
<input type="tel" id="mobile" name="mobile" class="forme required" />
</p>
<p>
<label for="email"> Email</label><br />
<input type="email" id="email" name="email" class="forme required" />
</p>
<p>
<input type="reset" id="reset" name="reset" value="Reset" />
<input type="submit" id="submit" name="submit" value="Submit" />
</p>
</form>
Please note: Don't use ONLY JavaScript to validate your form fields. You should always check the passed user informations on the server side too, because you can't control the user.
Have fun learning JavaScript.
Sincerely,
Sam.

javascript does not for some reason want to execute on my machine

I started using atom as my editor for learning Javascript. I've followed a bunch of tutorials online and while my code looks exactly like it does in the tuts, for some reason I'm missing the Javascript behavior. Here is a simple example of my code that simply won't run out of atom, notepadd++ or notepad. In atom I use the atom-live-server, in notepadd i basiclaly open it on local host. ANyoe have any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name="login">
<input type="text" placeholder="Username" name="UserID"><br>
<input type="text" placeholder="Password" name="Pass"><br>
<input type ="button" onclick="check(this.form)" value="Login"/>
</form>
<script type="text/javascript">
function check(form){
if(form.userId.value=="" || form.pass.value==""){
alert("BLAHBLAHBLAH")
}
}
</script>
</body>
</html>

Another method :
Specify ID's as well to the inputs.
Pass the button to the function.
Get the parent of the button (the <form>).
Get the #UserID and #Pass values using querySelector and value.
<form name="login">
<input type="text" placeholder="Username" id="UserID" name="UserID"><br>
<input type="text" placeholder="Password" id="Pass" name="Pass"><br>
<input type ="button" onclick="check(this)" value="Login"/>
</form>
<script type="text/javascript">
function check(button){
var parent=button.parentNode;
if(parent.querySelector('#UserID').value=="" || parent.querySelector('#Pass').value==""){
alert("BLAHBLAHBLAH")
}
}
</script>

The problem is that you not considering character's case sensitivity. userId and UserId are considered different. Therefore form is not able to find the reference to the UserId element and therefore erroring out. Please check the console output of the browser's developer tools to see the error. Following is the fixed code.
<p>Document</p>
<form name="login">
<input name="UserID" type="text" placeholder="Username" /><br />
<input name="Pass" type="text" placeholder="Password" /><br />
<input type="button" value="Login" onclick="check(this.form)" /></form>
<p>
<script type="text/javascript">// <![CDATA[
function check(form){
console.log('FORM', form)
if(form.UserID.value=="" || form.Pass.value==""){
alert("BLAHBLAHBLAH")
}
}
// ]]></script>
</p>
<p>Document</p>
<form name="login">
<input name="UserID" type="text" placeholder="Username" /><br />
<input name="Pass" type="text" placeholder="Password" /><br />
<input type="button" value="Login" onclick="check(this.form)" /></form>
<p>
<script type="text/javascript">// <![CDATA[
function check(form){
if(form.UserID.value=="" || form.Pass.value==""){
alert("BLAHBLAHBLAH")
}
}
// ]]></script>
</p>

form not posting to iframe back

This should have been pretty simple but I have spent a few hours trying to figure out why a simple form post would not end up in the iframe instead of a new window.
I am trying to post data to authorize.net and I want the reponse to be back in the iframe. However it opens a new window. I am not sure what else to do. here is my code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
document.getElementById("test-form").submit();
});
</script>
</head>
<body>
<form method="post" name="test-form" id="test-form" target="myIframe" action="https://test.authorize.net/gateway/transact.dll">
<input type="text" name="x_login">
<input type="text" name="x_fp_sequence">
<input type="text" name="x_fp_timestamp">
<input type="text" name="x_amount">
<input type="text" name="x_fp_hash">
<input type="text" name="x_show_form">
<input type="text" name="x_test_request">
<input type="text" name="x_type">
<input type="text" name="x_currency_code">
<input type="text" name="x_invoice_num">
<input type="text" name="x_description">
<input type="text" name="x_first_name">
<input type="text" name="x_last_name">
<input type="text" name="x_company">
<input type="text" name="x_address">
<input type="text" name="x_city">
<input type="text" name="x_state">
<input type="text" name="x_zip">
<input type="text" name="x_country">
<input type="text" name="x_phone">
<input type="text" name="x_email">
<input type="text" name="x_relay_response">
<input type="text" name="x_solution_id">
</form>
<iframe src="" name="myIframe></iframe>
</body>
</html>

By putting your code in Plunker, there is a syntax error at line 37:
<iframe src="" name="myIframe></iframe>
^-- missing "
After adding the closing quote, I can see the page loaded in the iFrame :)
https://embed.plnkr.co/aM5EsESHODV8nPbVhyK8/
You may want to consider changing to use an IDE which may help you identifying typos, so that hours can be saved.

You are missing double quotes at the end of the iframe name.

Form does not shows on clicking using JS

I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});

The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>

Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/

jquery on submit form search for its corresponding div and hide form

I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';

In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();

Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});

Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>

ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.