Member Avatar for aldm

Hi,

I have some problems with validating form in javascript.

I have a following HTML code:

<form action="registracija_preview.php" method="post" onsubmit="return ValidirajFormu();">
</form>

<div id='poruka></div>

What I want in validation is to check all the field in form (check for required fields etc). I want to show user error message in div tag with id='poruka'.

Part of code of function ValidirajFormu:

function ValidirajFormu(){
       var ime=(String) document.getElementById('ime');
       if(ime){
             document.getElementById('poruka').innerHTML='Niste unijeli ime!';
             return false;
       }
       ....//other validations
       else{
            return true;
       }
}

So, validation works OK, but message is not written in div tag.
Only if all fields are correct, form is submited, but there are no error message.

I appriciate any kind of help.

Thanks in advance,

Amer

Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 4 Replies
  • 145 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by gumape
Member Avatar for gumape

Hi,

a possible solution:

<head>
    <script>
        function CheckAndSubmit () {
			var message = "";
            var userName = document.getElementById ("userName");
            if (userName.value.length < 3) {
                message += "The name of the user must be at least 3 characters long!<br/>";
            }

            var password = document.getElementById ("password");
            var repassword = document.getElementById ("repassword");
            if (password.value.length < 6) {
                message += "The password must be at least 6 characters long!<br/>";
            }
            if (repassword.value != password.value) {
                message += "The two passwords are different!<br/>";
            }

            var acceptAgreement = document.getElementById ("acceptAgreement");
            if (!acceptAgreement.checked) {
                message += "You must accept the User Agreement to register!<br/>";
            }

			var poruka = document.getElementById ("poruka");
			poruka.innerHTML = message;

            return (message == "");	// return false if message is not empty
        }
    </script>
</head>
<body>
    <form id="regForm" method="post" action="#URL#" onsubmit="return CheckAndSubmit ()">
        User Name: <input type="text" name="userName" id="userName" />
        <br />
        Password: <input type="password" name="password" id="password" />
        <br />
        Repeat Password: <input type="password" name="repassword" id="repassword" />
        <br /><br />
        <input type="checkbox" name="acceptAgreement" id="acceptAgreement" /> 
        <label for="acceptAgreement">I accept the User Agreement and Privacy Policy</label>
        <br /><br />
        <input type="submit" value="Register" />
    </form>
	<br /><br />
	<div id="poruka" style="color:#ff0000"></div>
</body>

Related links:
onsubmit event,
getElementById method,
innerHTML property.

Member Avatar for aldm

Thank you very mubch...you solved my problem

I have one more question - how to make image button in css
I search on google, but this didn't work (using ID selector):

#sub{
    height: 20px;
    width: 80px;
    cursor: pointer;
    border: none;
    background: url('img/dalje.png') no-repeat left top;
}
Edited by mike_2000_17 because: Fixed formatting
Member Avatar for aldm

Hi again :)

I solved the problem that I asked in my last post, but I have another one.

I want to check if username already exist in database and if it exist, to show
message "Username that you entered already exist". So I add the code:

var ajaxRequest;  // The variable that makes Ajax possible!
		
		try{
			// Opera 8.0+, Firefox, Safari
			ajaxRequest = new XMLHttpRequest();
		} 
		catch (e){
			// Internet Explorer Browsers
			try{
				ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch (e) {
				try{
					ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} 
				catch (e){
					// Something went wrong
					var a=5;
				}
			}
		}
		ajaxRequest.onreadystatechange = function(){
			try{
				if(ajaxRequest.readyState == 4){
					var neka=ajaxRequest.responseText;
					poruka+=neka;
				}
			}
			catch(e){
				document.write('greska');
			}
		}
	
		ajaxRequest.open("GET", "provjerakorimena.php", true);
		ajaxRequest.send(null);

Code of provjerakorimena.php:

<?php
	echo 'Da';
?>

But when I satisffie all the checks except this, form is submitted.

I searched something about this on google.

So, question is:

Can ajax responseText variable be assigned to some variable in javascript (and how)?

Member Avatar for gumape

Hi, sorry for the late response.

See the Example 2 and Example 3 at the bottom of the following page:
onsubmit event.

I think they will be perfect for you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.