We Keep Coding

Cannot validate user input correctly from server?

How do I check multiple variable inputs at once to ensure that the regex is working? Everytime I enter anything, the form submits and doesn't alert anything.
I have tried test()method of regex validation too, and still no luck.
I am trying to validate user input with the following regex that makes to where anything that is not a number or blank space is considered a wrong input.
var format=/^(\s*|\d+)$/;
It only accepts numbers and blank spaces in the text box.
The following javascript is what I have:
var pitch = document.getElementById("pitch");
var chisel = document.getElementById("chis");
var saw = document.getElementById("saw");
//var arguments = [chisel, saw, pitch];
var format = /^(\s*|\d+)$/;
function regexTest() {
if (!chisel.match(format) && !saw.match(format) && !pitch.match(format)) {
alert("Repressed Action");
return false;
} else {
alert('Thank you');
}
}
<div class="lab">
<form method="post" action="http://weblab.kennesaw.edu/formtest.php">
Chisels: <input type="text" name="chisels" id="chis" size="5" /> Saw: <input type="text" name="saw" id="saw" size="5" /> Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5" />
<br /> Customer Name: <input type="text" name="customer name" size="25" />
<br /> Shipping Address: <input type="text" name="shipping address" size="25" />
<br /> State:
<input type="radio" id="master" name="card" value="master" /><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american" /><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa" /><label for="visa">Visa</label>
<br />
<input type="reset" value="Reset" />
<div class="lab">
<button onclick="regexTest()">Submit</button>
<button onclick="return false">Cancel</button>
</div>

There are a number of issues with your code, below I've refactored it to be a bit easier to read and so it works.
The validation listener should be on the form's submit handler, not the submit button since forms can be submitted without clicking the button. Also, if you pass a reference to the form to the listener, it's much easier to access the form controls by name.
You should get the values of the form controls when the submit occurs, not before. Your code gets the values immediately, before the user has done anything (and possibly before the form even exists), so put that code inside the listener function.
Lastly, the regular expression needs to match anything that isn't a space or digit, so:
/[^\s\d]/
seems appropriate. However, this will still allow the form to submit if the fields are empty (they don't contain non-digits or non-spaces). You'll need to add a test for that.
function regexTest(form) {
// Get values when the function is called, not before
var pitch = form.pitchfork.value;
var chisel = form.chisels.value;
var saw = form.saw.value;
// Test for anything that's not a space or digit
// var format = /^(\s*|\d+)$/;
var format = /[^\s\d]/;
if (format.test(chisel) || format.test(pitch) || format.test(saw)) {
// There must be at least one non-space or non-digit in a field
alert("Repressed Action");
return false;
} else {
alert('Thank you');
// return false anyway for testing
return false;
}
}
<div class="lab">
<form onsubmit="return regexTest(this)">
Chisels: <input type="text" name="chisels" id="chis" size="5"><br>
Saw: <input type="text" name="saw" id="saw" size="5"><br>
Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5"><br>
Customer Name: <input type="text" name="customer name" size="25"><br>
Shipping Address: <input type="text" name="shipping address" size="25">
<br> State:
<select name="states">
<option>Florida</option>
<option>Georgia</option>
<option>Alabama</option>
</select>
<br>
<input type="radio" id="master" name="card" value="master"><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american"><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa"><label for="visa">Visa</label>
<br>
<input type="reset" value="Reset">
<div class="lab">
<button>Submit</button>
<button onclick="return false">Cancel</button>
</div>
Hopefully this gets you to the next step.

Grabbing the page URL and submitting it when form is submitted?

I am trying to create a form that will appear when a button on an item page is pressed to receive a quote. Since there are many items, I want to know the URL of the page the form was received on and I am not sure how to achieve this.
My question is how do I grab the URL of the page the button was pressed on and then submit it along with the form as a hidden value so that I am aware what item was requested for a quote? Here is my code for the form. The Source URL input is just a placeholder.
<form action="http://et-signup.topright.com/oemSignup/subscribe" name="subscribeForm" method="post" onsubmit="alert('Thank You We Will Contact You Shortly'); return true;">
<input type="hidden" name="urlOfSubscribeThankYouPage" value="http://myurl.com">
<input type="hidden" name="urlOfErrorPage" value="http://myurl.com">
<input type="hidden" name="urlOfUnsubscribeThankYouPage" value="http://myurl.com">
<input type="hidden" name="mid" value="6286675">
<input type="hidden" name="listName" value="Item Page List - 52083">
Email Address: <input type="email" required="required" name="emailAddress"/> <br/>
First Name: <input name="profile.First Name"><br/>
Last Name: <input name="profile.Last Name"><br/>
Company Name: <input name="profile.Company Name"><br/>
Phone: <input name="profile.Phone"><br/>
Estimated Quantity: <input name="profile.Estimated Quantity"><br/>
Comments: <input name="profile.Comments"><br/>
Small: <input name="profile.Small"><br/>
Medium: <input name="profile.Medium"><br/>
Large: <input name="profile.Large"><br/>
Extra Large: <input name="profile.Extra Large"><br/>
2XL: <input name="profile.2XL"><br/>
3XL: <input name="profile.3XL"><br/>
Source URL: <input name="profile.Source URL"><br/>
<input type="hidden" name="SubAction" value="sub_add_update">
<input type="submit" value="Join">
</form>

You must be looking for the referrer variable.
If you are using plain html and javascript you can find it using:
document.referrer;
In PHP:
$_SERVER['HTTP_REFERER']
in ASP.NET:
Request.UrlReferrer
Hope that helps.

What I do for these kind of 'meta' options is make a hidden input field like so.
<input id="pageUrlInput" type="text" name="pageUrl" style="display: none;">
Then populate the value of this on document ready
$(document).function(){
$('#pageUrlInput').val(window.location.href);
});
This will populate the value of the hidden input field with the page url(window.location.href). Then just get the pageUrl param when processing the form on a server

How to make the user enter either of the 2 fields

<input type="text" name="firstname" placeholder=" Enter First Name" required/><input type="hidden" name="search" value="true" >
<input type="text" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
I have got these 2 text boxes and I am using these text boxes for searching users on a webpage.
I want the users can search using both these text boxes.
I have written the query for that but I am facing a problem, if user writes anything in either of the text boxes then it should not show any error on the front end but if user leaves both text fields empty then an error should be generated and I want to do it on the design page.
I don't want to write a validation code for that.
I have tried required field but it does not work in my case as either of the 2 text boxes should be input with data.

If you want to do validation in UI, please follow the below steps
1) Provide id's to both the input fields, which are used to validate the fields
<input type="text" id="firstname" name="firstname" placeholder=" Enter First Name" required/><input type="hidden" name="search" value="true" >
<input type="text" id="lastname" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
2) Using javascript you can valiate as below
function validate() {
if(document.getElementById("firstname").value.trim() != "" && document.getElementById("lastname").value.trim() != "" ) {
// show alert saying required input fields.
} else {
// do the submit action
}
}
3) Call the validate function on submit of the form.

Using Jquery/java script you can do client side validation..
Your HTML
<input type="text" id="first" name="firstname" placeholder=" Enter First Name" /><input type="hidden" name="search" value="true" >
<input type="text" id ="last" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
<input type="button" id="button1" value="check"/>
Validation
$("#button1").click(function()
{
$first=$("#first").val();
$sec=$("#last").val();
if(($first=="")&&($sec==""))
{
alert("Please enter any");
}
});

Have to remove submit button to get js to work

I'm trying to validate login details from an html form. The problem is that the submit button doesn't work with the code. So for example if I leave the username and password blank it won't come up with an alert for "Invalid Username or Password". If I remove type="submit" it works but the button becomes an input text box with an onclick function which does not look good. I was provided with this code as it is a more secure way of passing login details than I had written so I have to confess my ignorance on JS and JSON so apologies if I haven't provided enough info but any guidance would be much appreciated on how to get the button working with the js. This is running on Chrome only. Cheers.
HTML code
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="submit" onclick="myApp.getLogin()" value="Login" />
</form>
JS
myApp.getLogin = function(){
var url = "http://localhost:8084/Alumni_JV1/services/login.json?username=" + myApp.vm.username()
+ "&password=" + myApp.vm.password();
console.log(url);
$.getJSON( url, function( data ) {
if(data.response==='success'){
window.location.href="profile.jsp";
}else{
alert("Invalid Username or Password");
}
});
};

A submit button is used to send form data to a server. E.G. <form action='formHandler.php'>. It would submit the form to the current URL if the action attribute isn't defined.
You can get a button without any action with <input type='button' />.
So changing <input type='submit' ... to <input type='button' ... should do the trick :)
Then the code would be:
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="button" onclick="myApp.getLogin()" value="Login" />
</form>

Change input type=submit field with button tag.

How to prevent form element from sending some fields we don't want?

I have a form element that contains about 5 fields which final query is going to create by processing values those fields. So I want to send only final query, not all of those, to the server. How can I exclude those fields from being submitted (using jQuery)?
<form action="abc/def.aspx" method="get">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="text" name="field3" />
<input type="text" name="field4" />
<input type="text" name="field5" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
Output of form submission looks like below:
abc/def.aspx?field1=val1&field2=val2&field3=val3&field4=val4&field5=val5&final=finalQuery

Remove the name attribute on the fields you do not want submitted to the server.
<form action="abc/def.aspx" method="get">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
This is the simplest way to achieve what you want, and it works on all major browsers.
W3 spec talks about only submitting form values when name is present: http://www.w3.org/TR/html401/interact/forms.html#h-17.2

Remove the element on submit.
On the onsubmit handler:
$(formElement).submit(function() {
$(this.field1).remove(); //removing field 1 from query
return true; //send
});
Disabling the form element also stops it from being entered into the query.(tested on Chrome)
$(formElement).submit(function() {
this.field1.disabled = true;
return true; //send
});

I think the best solution is to handle the submit and then send the request yourself:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
$.get("abc/def.aspx",final=finalResult, "callbackfunction", "responseType");
return false;
});
that should do exactly what you want.
EDIT: as Alex pointed out this solution wouldnt send you to that page, just get the results if you need to go to the new page you can do:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
window.location('abc/def.aspx?final='+finalResult);
return false;
});
This way the browser is redirected to that page and only the final result is send.