Context :
I have a signup form for employers which has an input field for entering the website url. I am using jquery form validator plugin for all my client side validation requirements.
The plugin has got a default url method which makes it mandatory for users to enter any website url using https,http,ftp. However , I also need to allow users to enter the website url in the format such as : www.abc.com,abc.com
I have therefore used a custom validator method in the plugin for my validations.
While searching for the particular regex expression , I found the desired regex in the site i.e regexlib.com , which is tried and tested . Please check for the regex in my code below.
My problem :
However, when I tried using the regular expression in my custom validation method in the plugin , it is throwing an error : Uncaught SyntaxError: Invalid regular expression: Sometimes it even gives me the error:Range out of order in character class.
My research
I have gone through the following similar questions on Stack Overflow :
Regular Expression: Error - Invalid regular expression "Range out of order in char class"
Range out of order in character class
Uncaught SyntaxError: Invalid regular expression
As per the answers provided in these questions , I have tried doing the following
1. Replace single backslashes by double backslashes in the regular expression
2. Precede - by a single backslash in the regular expression
However my problem still persists . Any help will be appreciated.
My Code :
Signup form
<?php //echo form_open_multipart('Employer/signup', array('name'=>"frmempsignup", 'id'=>"myFrm", 'class'=>"form-horizontal", 'role'=>"form"));?>
<div class="row">
<?php if($this->session->flashdata('success')!=''){ ?>
<?php echo $this->session->flashdata('success');?>
<?php } ?>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading"><strong>Registration</strong> </div>
<div class="panel-body">
<!--f-->
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Company Name:</label>
<div class="col-md-9">
<input type="text" id="idcompany" name="company" class="form-control" placeholder="Company Name" value="<?php echo set_value('company'); ?>" />
<?php echo form_error('company', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Website:</label>
<div class="col-md-9">
<input type="text" id="idcompanyweb" name="companyweb" class="form-control" placeholder="" value="<?php echo set_value('companyweb'); ?>"/>
<?php echo form_error('companyweb', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Full Name:</label>
<div class="col-md-9">
<input type="text" id="name" name="fname" class="form-control" placeholder="Name" value="<?php echo set_value('fname'); ?>">
<?php echo form_error('fname', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Corporate Email:</label>
<div id="iddivemail" class="col-md-9">
<input id="email_id" name="email" class="form-control m-t0" type="email" placeholder="Corporate Email" value="<?php echo set_value('email'); ?>">
<?php echo form_error('email', '<label class="error">','</label>'); ?>
<!--<div id="emailValidationDiv"></div>-->
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Password:</label>
<div class="col-md-9">
<input type="password" name="passwd" id="idpasswd" class="form-control m-t0" placeholder="Password" value="<?php echo set_value('passwd');?>">
<?php echo form_error('passwd', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Confirm Password:</label>
<div class="col-md-9">
<input type="password" name="cpasswd" id="idcpasswd" class="form-control m-t0" placeholder="Password" value="<?php echo set_value('cpasswd');?>">
<?php echo form_error('cpasswd', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Contact No:</label>
<div class="col-md-6">
<input name="mobno" class="form-control" type="text" id="idmobno" placeholder="USA Contact Number" value="<?php echo set_value('mobno');?>">
<?php echo form_error('mobno', '<label class="error">','</label>'); ?>
</div>
<div class="col-md-3">
<input id="ext" name="ext" class="form-control" type="text" placeholder="Extension" value="<?php echo set_value('ext');?>">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Address:</label>
<div class="col-md-9">
<input id="idadd" name="add" class="form-control" type="text" placeholder="Enter USA corporate address" value="<?php echo set_value('add');?>">
<?php echo form_error('add', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group" id="iddivemplink">
<label class="col-md-3 control-label" style="text-align: left;">Linking:
<span data-toggle="tooltip" data-html="true" data-placement="bottom" class="tooltiplink" rel="txtTooltip" title="<p><font size='2'>Now, create your company page with ease. Click on the Linking checkbox below, complete the given details, and finish the registration process. After you register, your company profile page will be created. You can share the link of the page in different platforms for promotions where all your active jobs will be displayed.</p><p>Click here for <a href='<?php echo base_url()?>Employer/techejobs_linking_more' target=_blank><strong>more</strong></a></p>
</font></p>"><i class="glyphicon glyphicon-info-sign"></i></span></label>
<div class="col-md-9">
<input type="checkbox" name="emplink" id="idemplink" value="Y">
Link your job-openings with techejobs through techejobs linking
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" ></label>
<div class="col-md-9">
<label><input type="checkbox" name="tc" id="tc">
I agree to the <a href="<?php echo base_url();?>terms">Terms & Conditions</a></label>
<?php echo form_error('tc', '<label class="error">','</label>'); ?>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-9">
<div class="g-recaptcha" data-sitekey="6LexRREUAAAAAELhZaiO5FxRbgnyWEwIxFTWeHhE"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-3">
<input type="submit" value="Register" name="login" class="btn btn-primary btn-block" id="submitbutton">
</div>
</div>
<div class="form-group">
<label class="col-md-3"> </label>
<div class="col-md-9">Already registered? <a href="<?php echo base_url();?>Employer"> Login Here </a></div>
</div>
<!--f-->
</div>
</div>
<!--panel-->
</div>
</div>
</form>
Jquery Code :
$("form[name='frmempsignup']").validate(
{
onblur: function(element)
{
this.element(element);
},
ignore: ".ignore",
rules:
{
"company":
{
required:true,
companyname:true
},
"companyweb":
{
required:true,
urlval:true
},
"email":
{
required: true,
email: true,
emailval:true,
islinked:true,
remote :
{
//localhost
url:"http://expinfo04-pc/techejobs.dev/Employer/unique_email",
//live
//url:"https://www.techejobs.com/Employer/unique_email
type: "post"
}
},
"fname":
{
required:true,
fullnameval:true
},
"passwd":
{
required:true,
minlength:6
},
"cpasswd":
{
required : true,
equalTo: "#idpasswd",
minlength:6
},
"mobno":{required:true},
"ext":
{
digits: true,
maxlength:5
},
"add":{required:true},
"tc":{required:true},
"txtcompanyoverview":
{
required:true,
minlength:120
},
"logo":
{
required:true,
fileextension:true,
filesize:1000000
},
"hiddenRecaptcha":
{
required: function ()
{
if (grecaptcha.getResponse() == '')
{
return true;
}
else
{
return false;
}
}
}
},
//onkeyup : false,
messages:
{
"company":
{
required:"Please enter company name ",
companyname:"Please enter a proper company name"
},
"companyweb":
{
required:"Please enter the web url of your company",
urlval:"Please enter a valid url"
},
"fname":
{
required:"Please enter your full name",
fullnameval:"Please enter a proper name"
},
"email":
{
required:"Please enter your corporate email id",
email: "Please use a valid email format",
emailval:"Please enter corporate email id only",
remote:"Email already in use!",
//islinked : "Techejobs is already enabled"
},
"passwd":
{
required:"Please enter your password",
minlength:"Password should have a minimum of 6 characters"
},
"cpasswd":
{
required : "Please confirm your password",
equalTo : "Passwords don't match",
minlength:"Password should have a minimum of 6 characters"
},
"mobno":{required:"Please enter your contact no"},
"ext":
{
digits:"Please enter a proper extension",
maxlength:"Extension cannot be more than 5 digits"
},
"add":{required:"Please enter your address"},
"tc":{required:"Please accept the terms and conditions to continue"},
"txtcompanyoverview":
{
required:"Please enter your Company's overview",
minlength:"Minimum 120 characters are needed"
},
"logo":
{
required:"Please upload your company logo",
extension:"Only JPG,JPEG,PNG, and GIF files are allowed",
filesize:"Filesize must be less than 1 MB"
},
"hiddenRecaptcha":
{
required :"Are you sure you’re not a robot?",
}
},
errorPlacement: function( label, element )
{
if( element.attr( "name" ) === "tc" )
{
element.parent().append( label );
}
else
{
label.insertAfter( element );
}
},
submitHandler: function(form)
{
return true;
}
});
$.validator.addMethod("urlval", function(value,element)
{
//"^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)"
//var urlregex = new RegExp("^(http:\/\/|https:\/\/|ftp:\/\/|www.){1}([0-9A-Za-z]+\.)");
//var urlregex = new RegExp('^(http:\/\/|https:\/\/|ftp:\/\/|www.)([0-9A-Za-z]+\.)+(aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mn|mn|mo|mp|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|nom|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ra|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw|arpa)(:[0-9]+)?((\/([~0-9a-zA-Z\#\+\%@\.\/_-]+))?(\?[0-9a-zA-Z\+\%@\/&\[\];=_-]+)?)?))\b/imuS');
//var urlregex = new RegExp("^(https?://)?((?:(\w+-)*\w+)\.)+(?:aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mn|mn|mo|mp|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|nom|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ra|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw|arpa|[a-z]{2})(\/?\w?-?=?_?\??&?)+[\.]?[a-z0-9\?=&_\-%#]*");
//var urlregex = new RegExp('^(http:\/\/|https:\/\/|ftp:\/\/|www.)([0-9A-Za-z]+\.)+(aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mn|mn|mo|mp|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|nom|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ra|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw|arpa)(:[0-9]+)?((\/([~0-9a-zA-Z\#\+\%@\.\/_-]+))?(\?[0-9a-zA-Z\+\%@\/&\[\];=_-]+)?)?))\b/imuS');
// var urlregex = new RegExp("^((http|ftp|https|ftps):\\/\\/)?[\w\-_\\.]+\.(([0\-9]{1,3})|([a\-zA\-Z]{2,3})|(aero|arpa|asia|coop|info|jobs|mobi|museum|name|travel))+(:[0\-9]+)?\\/?(([\\w\\-\\.,@^%:/~\\+#]*[\\w\\-\\@^%/~\\+#])((\\?[a-zA-Z0-9\\[\\]\\-\\._+%\\$#\\=~',]*=[a-zA-Z0-9\\[\\]\\-\\._+%\\$#\\=~',]*)+(&[a\-zA\-Z0\-9\\[\\]\\-\\._+%\\$#\\=~',]*=[a-zA-Z0-9\\[\\]\\-\\._+%\\$#\\=~',]*)*)?)?");
// (https?://)?((?:(\w+-)*\w+)\.)+(?:com|org|net|edu|gov|biz|info|name|museum|[a-z]{2})(\/?\w?-?=?_?\??&?)+[\.]?[a-z0-9\?=&_\-%#]*
var urlregex = new RegExp("^(https?://)?((?:(\w+-)*\w+)\.)+(?:com|org|net|edu|gov|biz|info|name|museum|[a-z]{2})(\/?\w?-?=?_?\??&?)+[\.]?[a-z0-9\?=&_\-%#]*");
console.log(urlregex);
if (urlregex.test(value))
{
console.log(urlregex.test(value));
return true;
}
else
{
console.log(urlregex.test(value));
return false;
}
},function()
{
});
