Use browser-based "constraint validation"

to validate required fields, instead of doing it manually.

All supported browsers have this feature.

spec/register.js

@@ -68,13 +68,16 @@
                 }, 300)
             .then(function () {
 
+            test_utils.openControlBox();
             var cbview = _converse.chatboxviews.get('controlbox');
             var registerview = cbview.registerpanel;
             spyOn(registerview, 'onProviderChosen').and.callThrough();
             registerview.delegateEvents();  // We need to rebind all events otherwise our spy won't be called
             spyOn(_converse.connection, 'connect');
-            var $tabs = cbview.$('#controlbox-tabs');
-            $tabs.find('li').last().find('a').click(); // Click the Register tab
+
+            // Open the register panel
+            cbview.el.querySelector('.toggle-register-login').click();
+
             // Check the form layout
             var $form = cbview.$('#converse-register');
             expect($form.find('input').length).toEqual(2);
@@ -82,8 +85,8 @@
             expect($form.find('input').last().attr('type')).toEqual('submit');
             // Check that the input[type=domain] input is required
             $form.find('input[type=submit]').click();
-            expect(registerview.onProviderChosen).toHaveBeenCalled();
-            expect($form.find('input[name=domain]').hasClass('error')).toBeTruthy();
+            expect(registerview.onProviderChosen).not.toHaveBeenCalled();
+
             // Check that the form is accepted if input[type=domain] has a value
             $form.find('input[name=domain]').val('conversejs.org');
             $form.find('input[type=submit]').click();

src/converse-controlbox.js

@@ -48,7 +48,7 @@
             tpl_login_panel,
             tpl_search_contact,
             tpl_status_option,
-            tpl_spinner,
+            tpl_spinner
         ) {
     "use strict";
 
@@ -507,20 +507,16 @@
 
                 validate () {
                     const form = this.el.querySelector('form');
-                    const jid = form.querySelector('input[name=jid]').value;
-                    const password = _.get(form.querySelector('input[name=password]'), 'value');
-                    const errors = [];
-                    if (!jid || (
+                    const jid_element = form.querySelector('input[name=jid]');
+                    if (jid_element.value &&
                             !_converse.locked_domain &&
                             !_converse.default_domain &&
-                            _.filter(jid.split('@')).length < 2)) {
-                        errors.push(errors, 'invalid_jid');
+                            _.filter(jid_element.value.split('@')).length < 2) {
+                        jid_element.setCustomValidity(__('Please enter a valid XMPP address'));
+                        return false;
                     }
-                    if (!password && _converse.authentication !== _converse.EXTERNAL)  {
-                        errors.push(errors, 'password_required');
-                    }
-                    this.model.set('errors', errors);
-                    return errors.length == 0;
+                    jid_element.setCustomValidity('');
+                    return true;
                 },
 
                 authenticate (ev) {
@@ -535,15 +531,14 @@
                         return;
                     }
                     let jid = ev.target.querySelector('input[name=jid]').value;
-                    const password = _.get(ev.target.querySelector('input[name=password]'), 'value');
-
                     if (_converse.locked_domain) {
                         jid = Strophe.escapeNode(jid) + '@' + _converse.locked_domain;
                     } else if (_converse.default_domain && !_.includes(jid, '@')) {
                         jid = jid + '@' + _converse.default_domain;
                     }
-                    this.connect(jid, password);
-                    return false;
+                    this.connect(
+                        jid, _.get(ev.target.querySelector('input[name=password]'), 'value')
+                    );
                 },
 
                 connect (jid, password) {

src/templates/login_panel.html

@@ -1,32 +1,22 @@
 <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
     <legend>{{{__("Login")}}}</legend>
-
     <div class="conn-feedback fade-in {[ if (!conn_feedback_subject) { ]} hidden {[ } ]} {{{conn_feedback_class}}}">
         <p class="feedback-subject">{{{ conn_feedback_subject }}}</p>
         <p class="feedback-message {[ if (!conn_feedback_message) { ]} hidden {[ } ]}">{{{conn_feedback_message}}}</p>
     </div>
-
     {[ if (auto_login || _converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') { ]}
         <span class="spinner centered"/>
     {[ } else { ]}
         {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
             <label>{{{__("Jabber ID:")}}}</label>
-            <p class="form-help fade-in error {[ if (!_.includes(errors, 'invalid_jid')) { ]} hidden {[ } ]}">
-                {{{__('Please enter a valid XMPP address')}}}
-            </p>
-            <input autofocus
+            <input autofocus required
                    type="text"
                    name="jid"
-                   class="{[ if (_.includes(errors, 'invalid_jid')) { ]} error {[ } ]}"
                    placeholder="{{{placeholder_username}}}">
             {[ if (authentication !== EXTERNAL) { ]}
                 <label>{{{__("Password:")}}}</label>
-                <p class="form-help fade-in error {[ if (!_.includes(errors, 'password_required')) { ]} hidden {[ } ]}">
-                    {{{__('Please enter your password')}}}
-                </p>
-                <input type="password"
-                       name="password"
-                       class="{[ if (_.includes(errors, 'password_required')) { ]} error {[ } ]}"
+                <input required
+                       type="password" name="password"
                        placeholder="{{{__('password')}}}">
             {[ } ]}
             <input class="pure-button button-primary" type="submit" value="{{{__('Submit')}}}">

src/templates/register_panel.html

@@ -6,10 +6,10 @@
     <div class="form-errors hidden"></div>
 
     {[ if (default_domain) { ]}
-    	{{{default_domain}}}
+        {{{default_domain}}}
     {[ } ]}
     {[ if (!default_domain) { ]}
-    	<input autofocus type="text" name="domain" placeholder="{{{domain_placeholder}}}">
+        <input autofocus required type="text" name="domain" placeholder="{{{domain_placeholder}}}">
         <input class="pure-button button-primary" type="submit" value="{{{label_register}}}">
     {[ } ]}
 </form>