Stop submit until not fill out


#1

How to I prevent/disable submit until not fill out the all textbox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3 align="center">ONLINE<br>(Registration Application Form)</h3>
  </font></div></center></h4><form action="" onsubmit="return validateForm()">

  <div class="panel-body">
  <div class="panel panel-default">
    <div class="panel-heading">

Registration Details</div>
    <div class="panel-body">
      <div class="col-lg-12">
        <table class="table table-bordered" id="tbledirector"><tr><td>Name </td><td><input type="text" ng-model="" class="form-control" placeholder="Your Name ?"  autocomplete="off" minlength="10" maxlength="30" name="name" id="name" onblur="validateName(name)" /><td>Email</td><td><input type="text" ng-model="" class="form-control" placeholder="Email" name="email" id="email" onblur="validateEmail(value)" /></td></table></div></div></div>
           <input type="submit" value="Send">




<script>
		function validateName(x){
			// Validation rule
			var re = /[A-Za-z -']$/;
			// Check input
			if(re.test(document.getElementById(x).value)){
				// Style green
				document.getElementById(x).style.background ='#ccffcc';
				// Hide error prompt
				document.getElementById(x + 'Error').style.display = "none";
				return true;
			}else{
				// Style red
				document.getElementById(x).style.background ='#e35152';
				// Show error prompt
				document.getElementById(x + 'Error').style.display = "block";
				return false;	
			}
		}
		// Validate email
		function validateEmail(email){ 
			var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
			if(re.test(email)){
				document.getElementById('email').style.background ='#ccffcc';
				document.getElementById('emailError').style.display = "none";
				return true;
			}else{
				document.getElementById('email').style.background ='#e35152';
				return false;
			}
		}
		// Validate Select boxes
		function validateSelect(x){
			if(document.getElementById(x).selectedIndex !== 0){
				document.getElementById(x).style.background ='#ccffcc';
				document.getElementById(x + 'Error').style.display = "none";
				return true;
		    }else{
				document.getElementById(x).style.background ='#e35152';
				return false;	
			}
		}
		function validateRadio(x){
			if(document.getElementById(x).checked){
				return true;
			}else{
				return false;
			}
		}
		function validateCheckbox(x){
			if(document.getElementById(x).checked){
				return true;
			}
			return false;
		}		
		function validateForm(){
			// Set error catcher
			var error = 0;
			// Check name
			if(!validateName('name')){
				document.getElementById('nameError').style.display = "block";
				error++;
			}
			// Validate email
			if(!validateEmail(document.getElementById('email').value)){
				document.getElementById('emailError').style.display = "block";
				error++;
			}
			// Validate animal dropdown box
			if(!validateSelect('animal')){
				document.getElementById('animalError').style.display = "block";
				error++;
			}
			// Validate Radio
			if(validateRadio('left')){

			}else if(validateRadio('right')){
				
			}else{
				document.getElementById('handError').style.display = "block";
				error++;
			}
			if(!validateCheckbox('accept')){
				document.getElementById('termsError').style.display = "block";
				error++;
			}
			// Don't submit form if there are errors
			if(error > 0){
				return false;
			}
		}			
	</script>

#2

Once again, you really need to sort out your HTML before attempting to work on anything else. Just in the first few lines here:

<h3 align="center">ONLINE<br>(Registration Application Form)</h3>
  </font></div></center></h4><form action="" onsubmit="return validateForm()">

you have closing </font> and </center> tags, but no opening ones. (Those tags are obsolete and you should not be using them).

You also have closing </h4> and </div> tags, but no opening ones.

(I haven't looked any further than that.)


#3

The browser prevents submitting invalid forms by default if you're adding validation constraint attributes, e.g.

<input type="text" required>

You can then also disable the submit button quite simply by just .checkValidity() of the form:

<form id="my-form">
  <input type="text" required>
  <input type="submit" value="Submit">
</form>

var form = document.getElementById('my-form')
var submitBtn = form.querySelector('[type="submit"]')

submitBtn.disabled = true

form.addEventListener('input', function () {
  submitBtn.disabled = !form.checkValidity()
})

But yes as @TechnoBear says get your markup sorted first, otherwise it may not even work. Putting the <script> tag inside the form itself is also not right... I'm surprised it actually works with the inline submit handler. Anyway, put all your scripts to the end of the page before the closing </body> tag, or if the script must be present before the body of the page, inside the head.


#4

@m3g4p0p your code was good but about my code . It was special. You know in that code when any one leave blank the textbox then automatically change the background of textbox in red and show alert in text below rhe textbox. But in your given code it was only for disabled function. Could you add the both code in my JavaScript.


#5

My above snippet would work alongside yours without problem... although you could simplify this a lot by also using the constraint validation API. I happened to give an example in another thread only yesterday. :-) E.g. you could add an error class to the invalid element like so:

var form = document.getElementById('my-form')
var submitBtn = form.querySelector('[type="submit"]')

submitBtn.disabled = true

form.addEventListener('input', function (event) {
  var target = event.target

  target.classList.toggle('error', !target.validity.valid)
  submitBtn.disabled = !form.checkValidity()
})

#6

I am not getting ok, Is there any code is having to change the "required" alert.

<Input type ="textbox" REQUIRED>

Generally we seen it in white color if any code is available to change look of REQUIRED alert then after not required to use JavaScript.


#7

I'm afraid I don't quite follow, which "required" alert do you mean?


#8

If you mean the messagebox text

Customized error messages

As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.

These automated messages have two drawbacks:

  • There is no standard way to change their look and feel with CSS.
  • They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.

.....

To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.

.....

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.

* example code can be found on the MDN page linked to


#9


It is possible to to change the ''Required'' Command alert as mentioned in image from white to red?


#10

Yes. Take another look at the last example on the MDN page that was linked to.


#11

@Mittineague thank you! I like https://jsfiddle.net/api/mdn/ this page but in this code defaultly required field is in red border.

We make it form show normally and when click on submit them red border show in textbox.

Is it possible?


#12

But isn't that what your original code is doing? And if you disable the submit button until the whole form is valid (as per your original request), further client-side validation on submit would be redundant... ;-) here's a fiddle that demonstrates the technique from post #5 (slightly modified to also show error messages).


#13

I didn't see anything in that jsfiddle last night, and I'm still not seeing anything in it today. So I can't know what problem(s) you're having.

If you can post minimal examples of the HTML, CSS and JavaScript that you are working with here I'll be glad to help further.


#14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.