Here is the code snippet provided that accepts a card number in the format 5077-1200-5007-3284-951. The card number works on all devices/browsers except for iOS. Additionally, I would like to know if there is an alternative regex pattern I can use for the same input format.
<html>
<link rel="stylesheet" type="text/css" href="css/semantic.min.css"></link>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/semantic.min.js"></script>
<body>
<div class="field example">
<form class="ui form">
<div class="field">
<label>Card Number</label>
<input id="name" name="cardNumber" type="text">
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
</div>
</body>
<script>
$('.field.example form')
.form({
on: 'blur',
fields: {
empty: {
identifier : 'empty',
rules: [
{
type : 'empty',
prompt : 'Please enter a value'
}
]
},
cardNumber: {
identifier: 'cardNumber',
rules: [{
type: 'empty',
prompt: 'Required'
},
{
type: 'regExp[/(.*[0-9 \-]){23}/]',
prompt: 'Invalid'
}]
},
checkbox: {
identifier : 'checkbox',
rules: [
{
type : 'checked',
prompt : 'Please check the checkbox'
}
]
}
}
})
;
</script>
<html>