Regular expression form validation in Chrome - regex

Question

I have a web form that was working at one point, but all of a sudden it no longer works in Chrome. The patterns pass tests at regex101.com, and the form can be submitted with Firefox, but Chrome doesn't like it any more. The most confounding thing about it is that it has been failing at different points, even without changes to the form. (E.G. sometimes first name fails, sometimes last name fails - even though the patterns are the same. Sometimes it makes it down to phone number or URL. Can't imagine why.) I've analyzed it to the best of my ability - any suggestions?
<form name="form-careers" enctype="multipart/form-data" action="/careers/#form" method="POST">
<div class="form_labels">
<p><label for="fname">First Name:</label></p>
</div>
<div class="form_inputs">
<p><input type="text" name="fname" id="fname" placeholder="*" pattern="/^([A-Za-z-\ \.]+)$/" value="<?php if (isset($fname)) { echo $fname; } ?>" required /></p>
<div class="error" id="error-fname"><?php if (isset($err_fname)) { echo $err_fname; } ?><?php if (isset($err_fname2)) { echo $err_fname2; } ?></div>
</div>
<div class="form_labels">
<p><label for="lname">Last Name:</label></p>
</div>
<div class="form_inputs">
<p><input type="text" name="lname" id="lname" placeholder="*" pattern="/^([A-Za-z-\ \.]+)$/" value="<?php if (isset($lname)) { echo $lname; } ?>" required /></p>
<div class="error" id="error-lname"><?php if (isset($err_lname)) { echo $err_lname; } ?><?php if (isset($err_lname2)) { echo $err_lname2; } ?></div>
</div>
<div class="form_labels">
<p><label for="email">Email:</label></p>
</div>
<div class="form_inputs">
<p><input type="email" name="email" id="email" placeholder="*" pattern="/^([\dA-Za-z0-9\._-]+)#([\dA-Za-z0-9\._-]+)\.([A-Za-z]{2,10})$/" value="<?php if (isset($email)) { echo $email; } ?>" required /></p>
<div class="error" id="error-email"><?php if (isset($err_email)) { echo $err_email; } ?><?php if (isset($err_email2)) { echo $err_email2; } ?></div>
</div>
<div class="form_labels">
<p><label for="phone">Phone:</label></p>
</div>
<div class="form_inputs">
<p><input type="tel" name="phone" id="phone" placeholder="* (###-###-####)" pattern="/^([\d]{3})\-([\d]{3})\-([\d]{4})$/" value="<?php if (isset($phone)) { echo $phone; } ?>" required /></p>
<div class="error" id="error-phone"><?php if (isset($err_phone)) { echo $err_phone; } ?><?php if (isset($err_phone2)) { echo $err_phone2; } ?></div>
</div>
<div class="form_labels">
<p><label for="role">Desired Role:</label></p>
</div>
<div class="form_inputs">
<p><input type="text" name="role" id="role" placeholder="*" pattern="/^([\\\/A-Za-z-\ \.]+)$/" value="<?php if (isset($role)) { echo $role; } ?>" required /></p>
<div class="error" id="error-role"><?php if (isset($err_role)) { echo $err_role; } ?><?php if (isset($err_role2)) { echo $err_role2; } ?></div>
</div>
<div class="form_labels">
<p><label for="portfolio">Portfolio/Website:</label></p>
</div>
<div class="form_inputs">
<p><input type="url" name="portfolio" id="portfolio" placeholder="(http://...)" pattern="/^(https?:\/\/)?([\dA-Za-z\.-]+)\.([A-Za-z\.]{2,6})([\/\w \.-]*)*\/?$/" value="<?php if (isset($portfolio)) { echo $portfolio; } ?>" required /></p>
<div class="error" id="error-portfolio"><?php if (isset($err_portfolio)) { echo $err_portfolio; } ?><?php if (isset($err_portfolio2)) { echo $err_portfolio2; } ?></div>
</div>
<div class="form_labels">
<p><label for="resume">Upload Resume: (optional)</label></p>
</div>
<div class="form_inputs">
<p><input type="file" name="resume" id="resume" accept=".pdf, .txt, .rtf, .doc, .docx" style="margin-bottom:2px;"/>
<span style="color:#777;">(pdf, txt, rtf, doc, docx)</span></p>
</div>
<input type="hidden" name="formtype" id="formtype" value="careers">
<div class="form_labels submit">
<p> </p>
</div>
<div class="form_inputs">
<input type="submit" value="Submit" name="action" class="button-red" >
</div>

Answer 1

I don't have a good answer, for i can't see what is wrong with the code. It should be withoud the / slashes, but from the comment i gather you got that already.
What i have to offer is an small javascript option for browsers that don't suport this atribute. And works in chrome. SO hope this helps you!
if ( ! input.hasOwnProperty('pattern') && ~input.value.search(input.pattern)) {
// Valid input field for browsers which don't support `pattern` attribute.
}
Here is an JS fiddle
And a small advise, don't only test the inputs on the client side. This is usefull for feedback to a user, but don't relay on the inputs being correct on the server side. (But i think you might already know this)