Currently, I am in the process of validating a form that has been written in Javascript/Dojo before sending it via Ajax. Here is the code snippet:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
</script>
<script>
function send()
{
var mainForm = dojo.byId("mainform");
dojo.connect(mainForm, "onsubmit", function(event)
{
dojo.stopEvent(event);
if (mainForm.validate())
{
alert("valid");
var xhrArgs = {
form: dojo.byId("mainform"),
load: function(data)
{
// Success
alert("Success");
},
error: function(error)
{
// Error
alert("Error");
}
}
var deferred = dojo.xhrPost(xhrArgs);
}
else
{
alert("not valid");
}
});
}
dojo.addOnLoad(send);
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
<h2>Invitation:</h2>
<div dojoType="dijit.form.Form" id="mainform" jsId="mainform" encType="multipart/form-data" action="whatever.php" method="post">
<label for="name">Name:</label><input type="text" id="name" name="name" size="50"
dojoType="dijit.form.ValidationTextBox"
required="true"
propercase="true"/>
<br><br>
<button type="submit" dojoType="dijit.form.Button">Send Message</button>
</div>
</body>
In the actual production code, I do not utilize "alert" messages; they simply assist me in determining what aspects are functioning correctly and what might require adjustments. The issue at hand here is that the call to mainForm.validate() seems to get stuck and does not return. By eliminating this validation call, the form data successfully gets posted to the .php file, however, there is no validation procedure in place.