I have a Joomla website with an extension that handles user registration. This extension has two fields for Name & E-mail so users have to fill in their name and e-mail address twice in the form:
Screenshot of the registration
I've tried to change the form to use the data from the first section (name and e-mail) and use it in the "e-mail notification" section as well. Unfortunately it didn't work..
here is the code for the first section(name & mail):
<div class="control-group">
<label class="control-label" for="account_name"> <?php echo JText::_( 'ACCOUNT_NAME' ); ?></label>
<div class="controls">
<input class="inputbox" type="text" name="account_name" id="account_name" size="80" maxlength="250" value="<?php echo $this->account->account_name;?>" <?php if(!$this->account->id) echo "autofocus='autofocus'"; ?> />
</div>
</div>
<div class="control-group newJoomlaAccountField hidden" id="acc_email_group">
<label class="control-label" for="account_email"> <?php echo JText::_( 'ACCOUNT_EMAIL' ); ?></label>
<div class="controls">
<input class="inputbox" type="text" name="account_email" id="account_email" size="80" maxlength="250"/>
<span class="help-inline hidden" id="account_email_error"><?php echo JText::_( 'REQUIRED' ); ?></span>
</div>
</div>
and here is the code for the second "e-mail notification":
<div class="control-group">
<label class="control-label" for="name"> <?php echo JText::_( 'YOUR_NAME' ); ?></label>
<div class="controls">
<input class="inputbox" type="text" name="name" id="name" size="80" maxlength="250" value="<?php echo $this->account->name;?>" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="email"> <?php echo JText::_( 'EMAIL' ); ?></label>
<div class="controls">
<input class="inputbox" type="text" name="email" id="email" size="80" maxlength="250" value="<?php echo $this->account->email;?>" />
</div>
</div>
Unfortunately if a user doesn't fill in the second section they wouldn't get any e-mail notification at all because the extension shows a blank e-mail and name for them in the admin.. Any idea to have these fields only once but use the data in two separate places? :)
One validation method which I like because it's really flexible and can be easily customised for different use cases is jQuery validate
You include the jQuery plugin either site-wide or just on the form page and add the validation rules
Here's a sample to check that a name and a valid email address have been entered on a form. View this live
This is a relatively simple application of the validation plugin, here are some way more sophisticated examples, with more complex validation and the rules passed via the javascript:
https://jqueryvalidation.org/files/demo/
Hope this helps!
HTML
<!-- load jquery validate from CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form action="" name="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com"><br>
<button type="submit">Register</button>
</form>
<!-- validate form when it's submitted -->
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$("form[name='registration']").validate({
// Specify validation rules
rules: {
firstname: "required",
email: {
required: true,
email: true
}
},
// Specify validation error messages
messages: {
firstname: "Please enter your firstname",
email: "Please enter a valid email address"
},
submitHandler: function(form) {
form.submit();
}
});
});
})(jQuery);
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.