Creating Form Box, so a user has to type before clicking "Submit"

Is there a way of making a text box which if a user clicks the Submit Button without typing any text, then it won't allow the search to take place.

Can this be done without JS?

 

Given the current HTML/XHTML spec, you need a scripting language to enforce required fields. Maybe in the future it will be built in.

The following javascript and xhtml is an example of preventing the submit if a text box is blank.

function validateValue()
{
	return document.getElementById('idtextbox').value.length > 0;
}

Code (javascript):

<form action="yourpage.php" method="post" onsubmit="return validateValue();">
<input type="text" name="nametextbox" id="idtextbox" />
<input type="submit" value="Submit" />
</form>

Code (markup):

 

Ah I see, I thought it might be to do with onsubmit, but does it need to be controlled by JS?

I thought it was built into forms, but maybe I was dreaming...perhaps I saw something in my version of Dreamweaver?

 

I'm not aware of any built-in functionality that would do what you're asking. You're going to need to use javascript, or simply let the form be submitted, validate on the backend, then respond back with the same page but with warnings.

If you're interested in reading up on a proposed specification called Web Forms 2.0 (submitted to the W3C by Mozilla and Opera), they have a required attribute listed.
http://whatwg.org/specs/web-forms/current-work/#the-required

I don't think any browsers support Web Forms 2.0 yet (maybe Opera 9?), so I wouldn't count on using the required attribute just yet.

 

Yep, I'll probably use this code then:

on the search form add:

onsubmit="return checksearch();"

The JS is:

function checksearch() {
e = document.getElementById('q');
if(!/\S/.test(e.value)) {
alert("You must enter a search term.");
return(false);
}
return(true);
}

 

wow, this is realy cool