Today we will see an easy way to implement (from scratch
a small widget in any Wordpress theme, which allows users to enter an e-mail to a service
newsletter. Everything will be done with jQuery
, and is nothing but a simplified implementation of what I faced in my previous post on 
form validation with jQuery
. What we are going form validation with jQuery I developed it to create the new dynamic version of the site of the Xiu Zhen Dao 
method, which uses WordPress as CMS note: the widget in question is visible in the right sidebar, on any given page
method, which uses WordPress as CMS note: the widget in question is visible in the right sidebar, on any given page 
In this case, to make life easier on us and users, there is only one field to be filled with your e-mail, and the widget fails to properly validate this field, such as ensuring that it is this the '@' and at least one point '.' (This will be detailed below):
The nodal points are two: Create the structure of the form in a text widget
Enter the code necessary for the operation of the widget via an external file, to be added to the file header.php
.
( "Free Text or HTML). Here is my widget compiled: Enter the code necessary for the operation of the widget via an external file, to be added to the file header.php
. 
You must first create the structure of the HTML form, and we should give a new widget, a text, ranging from the admin panel of WordPress, Widget → Appearance section, and choose the type 
Sign-up Method XiuZhenDao 
\u0026lt;form action="" method="post" id="form_news">
\u0026lt;fieldset> \u0026lt;input id = "email_news" name = "email_news" type = "text" value = "your e-mail" /> \u0026lt;input id="submit_news" type="submit" value="iscriviti" /> \u0026lt; ; / fieldset> \u0026lt;/ form> \u0026lt;/ div> The CSS used to format the form is almost negligible, because it takes little beyond what is already present in the style of the theme Wordpress, where generally the input box and buttons are already drawn up. This style can be inserted into the document . css main theme, or in any other style sheet included in the page where you will place the widget. / newsletter widget * * / # \u0026lt;form action="" method="post" id="form_news"> newsletter_form # email_news
{width: 130px;} # # newsletter_form submit_news
{margin-top: 5px;
padding: 2px;
cursor: pointer;} 
# newsletter_form . catched {font-style: italic;}
# newsletter_form . catched {font-style: italic;} class
. catched
we will need later in the message of success.
2. jQuery validation 's time to write the script validation: it is essentially identical to what I used in the previous post
, but more time to implement a validation for our field more professional e-mail (as it is the only we have, this time!)
- Here's what the script does: when the user clicks the button "subscribe" to check that the field has been filled in correctly. If this does not occur, the field turns red, or else send an email to the address entered and displays a success message.
- (function ($) { $ (document). Ready (function () { / / newsletter widget
$ ("# submit_news) . click (function () {
/ / var style error
errorclass
= {'background': '# ff435b', 'color': '# 000', 
'borderColor': '# 000'}
/ / analysis of data entered 
'borderColor': '# 000'} email_news var = $ ("input # email_news). val ();
var ln = email_news.length;
atpos var = var email_news.indexOf ("@");
dotpos = email_news . lastIndexOf (".");
/ / Field validation e-mail
if ((atpos \u0026lt;1 )
Thanks! You have entered
newsletter
'). Append ('
'.) Hide ();
$ (' # message_news. Catched '). Html (email_news) $ (' # message_news '). FadeIn (' slow '); }}); return false;}
)The field validation e-mail to check that the entered data meets the following conditions:
});
}) (jQuery);
let us look at the first part of the code:
The first statement (lines 5 -7) only serves to automatically clear the text field when the user clicks on it to write its data.
Line 9 catches the event click on the submit button to start the validation procedures.
Lines 12-16 define a CSS class that is used to change the appearance of the input field in error.
must not be null Must contain at least one character '@' and at least one point '.'
The character '@' should not be given at the beginning of the quote
Point '.' must be at least one character away after the '@' but can not stand last.
To do this, first of all, it stores the data entered by the user by the method
, which also allows us to display a success message, without having to reload this or other pages.
val ()
, and then examines:
it calculates length by the method
length (line 20)
it locates the '@' character by the method
indexOf ()
(line 21)
you locate the position of the last period '.' inserted by the method
lastIndexOf ()
(line 22).
At this point, you can validate: the conditions are all alone sufficient to make an incorrect e-mail, and are connected by an OR (
if it is in first position, with the control
atpos \u0026lt;1
you see now is if '@' or if there is first
With
dotpos - atpos \u0026lt;2
we made sure that '@' and ' '. not be consecutive, and that the last '.' to the right of '@'
With the latter condition,
dotpos
== ln-1, but if you check the '.' is in last place.
This validation is very similar to that suggested by
w3schools.comin JavaScript Form Validation .
If the validation does not pass, the field turns red Apply the
. Errorclass
(line 26).
Everything that comes after concerns the transfer of data to a php script for sending e-mail, and has been addressed in detail in the post
form validation with jQuery
.
In essence, we use the method
$. Ajax
Noteworthy, this time, the inclusion of data stored in the message of success to you, confirming what he had inserted just insert a
- \u0026lt;span>
- with a class for it (in my case . catched
- ) and pass the stored value, by the method
- html (val)
- 3. PHP script
- The last thing you see is the script that sends e-mail, and now there's really
- minimal! I have written like this:
- \u0026lt;?
- 4. files to include
- summary, after inserting the HTML code widget (1 above), you must enter a jQuery script file that we have seen above (Section 2) in the header.php template (and at least in the \u0026lt;head> of each page that will display the widget), for example like this:
- \u0026lt;script type="text/javascript" src="newsletter_validation.js"> \u0026lt;/ script> Then you have to put the php script at the address specified in the url of the method $. ajax (perhaps the most convenient place is an absolute URL after placing the file, for example in the theme directory Wordpress).
\u0026lt; li> 