Develop Reference

What is the best practice to check if the cells in an HTML table are empty?

So I have a registration table in my website that has fields that need to be filled before submission. As far as I know, I have two options to make sure of that. First one is to use the 'required' attribute for each input or to check them at PHP level and using js. Which one is the better practice? Is there a better way to do it? And why?
Here is the way that I do it using HTML:
<form role="form" action="registration.php" method="post" id="login-form" autocomplete="off">
<div class="form-group">
<label for="username" class="sr-only">username*</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter Desired Username" required>
</div>
<div class="form-group">
<label for="email" class="sr-only">Email*</label>
<input type="email" name="email" id="email" class="form-control" placeholder="somebody#example.com" required>
</div>
<div class="form-group">
<label for="password" class="sr-only">Password*</label>
<input type="password" name="password" id="key" class="form-control" placeholder="Password" required>
</div>
<input type="submit" name="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Register">
</form>
In the PHP/JS version the code should look like this:
if (empty($username) || empty($email) || empty($password)){
echo "<script>alert('Fields cannot be empty')</script>";
}
I appreciate your help.

My suggestions is to have both, client & server side validation. That way you reduce server load & it's good if you later turn it into the API for eg. Hope this helps.

Client-side validation is the faster way to deal with the validation process than on the server-side because all the tasks happens on the webpage there itself and the network time form client to server is saved.
But in only doing client-side validation there is a risk of attacks clients which can easily bypass the client-side so here it is need to validate the strings submitted by the cilent on the server-side which will save your data from the dangerous inputs.
Note : In short, in terms of faster validation client-side is better and in terms of the security of the data server-side is a better option.

The truth is the server is always out a limitation on every website so as all we can we have to reduce the computing and programs from server to Client-side and to lend the render to user's computer. so if you can use js to do that never interfere PHP on this. just use js and if your problem is going to handle with pure CSS too is going to be very better.

HTML5 form required attribute language

Html5 form validation uses the browser (or os?) language, but I have an English website for mostly Duch users.
So all validation messages should be in English.
How can I change the language for these validation messages?
This is not a duplicate, I know I can set my own custom messages.
I don't need this, I just want to set the correct language, if that's possible.

Use the title tag to display the custom message:
<input type="text" required title="Mijn aangepaste boodschap" />
EDIT
#Denis Chenu is right, this is not the correct solutions, this post has a correct javascript solution: changing the language of error message in required field in html5 contact form
So this is a duplicate and can be closed?
document.getElementById('fname').setCustomValidity('Dit is verplicht kut');
<form>
<label for="fname">First name:</label><br>
<input required type="text" id="fname" name="fname" title="Vul dit veld in kut"><br>
<label for="lname">Last name:</label><br>
<input required type="text" id="lname" name="lname">
<button type="submit">Submit</button>
</form>

Onclick function not working with CFINPUT validation

I am trying to validate the fields using CFINPUT and then calls a popup window function to do more stuff BEFORE submitting the form but it's not working. The onclick function seems to take precedent over the CFINPUT validation. As soon as I click on the Submit button it's calling the popup window function first without validating the fields. I need it to:
first validate the fields
call the popup function
then submit the form after the popup closes itself
(p.s. I see other similar case on here but there is no answer given)
The code looks like this:
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
<input type="submit" value=" Send " onclick="popup()">
....
Please help. Thank you.

This is an old blog posting so not sure how accurate things are today but it shows how you can run the CFFORM validation via the _CF_checkTaskForm() function. So it seems like if you change the submitting of the form to a button via <input type="button" value="Send" onclick="popup(this.form)" /> then change the popup function to first validate the form via the _CF_checkTaskForm() and if that passes to proceed with the other JS you are doing.
http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/
To expand on that, I just looked at a CF8 and CF11 installations and looks like the function in those is _CF_checkCFForm_1 if using that version of CF then something like this should get you in the correct direction:
<script>
popup = function(formreference) {
var check = _CF_checkCFForm_1(formreference);
if (!check) {
//if the rules failed then do not submit the form
return false;
} else {
// Do the popup
}
}
</script>
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
<input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>

The cfinput validation you're attempting to do is the client-side equivalent to
<cfif len(trim(string)) gt 0>
(Edit: That is not to imply that you should depend wholly on client side validation. Client-side validation is more of a feature to help your visitors. Server side validation is still important.)
Which I have to say is really weak validation. Anything consisting of at least 1 non-whitespace character will pass the test. People will be able to have usernames like "!" which isn't fanstastic, but that's just some information.
On the jQuery Validate link you provided, they show an example form (along with a link of the same form in action)
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
This very basic example shows how simple Validate can be to install, and a simple format of
<input name="ele" type="text" required>
is exactly the same level of validation you're attempting. So, to begin with, you can almost copy and paste the code. (Aside from from the different requirements you can make, setting minlength requires a certain number of characters and requires that at least one not be whitespace).
jQuery Validate can get quite extensive but is very easy to basically install and once you become familiar, make custom classes as needed
As a final note, don't disregard the disdain for CFForm elements. It may seem like others are disregarding your question, but that's not the case.
To be honest, they began to be introduced at a different time in the life of the internet, but have always been kind of finicky to work with. Expansion to them, in the opinions of many, have not been done well and have frequently exasperated the flaws.
It's super attractive to be able to say <cfinput...required> but the tags become a nuisance and you don't easily have the fine control over them that you might desire. They're a crutch, and a rusty crutch at that.
You might check out CFUI The Right Way # Github or this hosted version for some great insight and examples.

jqBootstrapValidation plugin is not working for my form

This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.
No error is also showing in the console; only a warning is showing saying:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
My form and the JS code is given below.
<form id="login-form" method="post" action="#" novalidate>
<label for="login-email" class="control-label">Email : </label>
<input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
<label for="login-password" class="control-label">Password : </label>
<input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
<input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>
$("#login-form input").not("[type=submit]").jqBootstrapValidation();

You must use proper controls in your markup for this to work.
Ex.
<form ...>
<div class="control-group">
<label ...>Email</label>
<div class="controls">
<input ... />
<p class="help-block"></p>
</div>
</div>
</form>
And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.
Ex.
/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});
/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});
Then simply add your "validated" class to anything you need validated:
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
Hope this helps!

With jQuery Mobile forms, where do i put the validation message?

According to the jQuery Mobile docs, this is how you set up fields in a web form:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
Is there a best practice or "official" way of adding a validation message to this? I basically want the validation messages to appear under each textbox in my form.

I haven't seen any "official" way of supporting input-validation fields. What we're currently doing though, is using the combination of:
jquery.validate
jquery.unobtrusive.js (not a pre-requisite)
asp.net mvc3 w/ Fluent validation (not a pre-requisite)
Here's an example of what the input-validation looks like for a single field:
<label for="Name" class="ui-input-text">Name Input:</label>
<input data-val="true" data-val-required="Name is required" id="Name" name="Password" type="text" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d">
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
jquery.validate then takes care of inserting and displaying the correct message in the validation span. It doesn't support html5 input field-types yet, but I have a branch on github with the necassary changes to support this.