just stuck on trying to get form validation to work.
Before you say anything i am using jquery to pull files into a div, so the css file is in the index.php (not relevant here).

So i am trying to get some form validation here as i'm still learning here for university and i'm confused what is wrong here with the script to validate the form.

Oh and just a cookie question ... is it possible for when someone submits form but it throws an error that the content stays within the fields? or can i not because i'm using js to submit the form data?

Thanks to any replies :)

```
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script language="javascript" type="text/javascript">
function validateForm(form){
var user=form.username.value;
var email = form.email.value;
var str=form.password.value;
var cstr=form.cpassword.value;
var err={}; 
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
//check required fields
//checks username
if((user.length < 3) || (user.length > 15)){
err.message="username must be between 3 and 15 characters.";
err.field=form.username;
}
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {
err.message="Invalid password length"; 
err.field=form.password; 
}
//check if repeated password matches
if(cstr!=str)
{
err.message="Passwords do not match";
err.field.form.cpassword;
}
//validate email
if(!(validemail.test(email))){
err.message="Invalid email"; 
err.field=form.email; 
}
if(err.message) 
        { 
               document.getElementById('results').innerHTML = err.message;
                err.field.focus();
                return false;                        
        } 
return true
}
</script> 
</head>
<body>
<div id="content" class="content">
    <div class="content-heading">
        <div class="content-heading-title">
        <h3>Register now!</h3>
        </div>
    </div>
    <div class="content-info">
    <form id="myForm" method="post" onsubmit="return validateForm(this);">
    Username:        <input name="username" id="username" type="text" /><br />
    Email:           <input name="email" id="email" type="text" /><br />
    Password:        <input name="password" id="password" type="password" /><br />
    Confirm Password:<input name="cpassword" id="cpassword" type="password" /><br /> 
    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
    </form>
    <div id="results"></div>
    </div>
</div>
    <script>
    function SubmitFormData() {
        var username = $("#username").val();
        var email = $("#email").val();
        var pass = $("#password").val();
        var cpass = $("#cpassword").val();
        $.post("submit.php", { 
            username: username, 
            email: email, 
            pass: pass,
            cpass: cpass
        }, function(data) {
            $('#results').html(data);
            $('#myForm').trigger('reset');
        });
    }
    </script>
</body>
</html>

```